HTML5 客户端存储数据的新方法及注意事项

各位，你们有没有过每次都得输一堆密码，记不清楚就犯愁的经历？别急，localStorage这个小玩意儿能解救你。下面就让我给你们讲讲怎么用，还有一些需要注意的地方。

localStorage是什么？

来，先搞懂啥叫localStorage。这货其实就是HTML5里新增的功能，让我们可以轻松地把用户名啊密码之类的数据保存在电脑里面。而且，区别于老式的cookie，这个localStorage可不是每次请求都要传给服务器，方便又快捷！

为什么选择localStorage？

你也许会奇怪:干嘛要用localStorage存密码？其实，这可是个好事。首先，数据只有手动清除才会消失。而且跟cookie比起来，它能存的东西多太多了，特别对那些要放好多信息的网站，简直就是救星！

如何使用localStorage存密码？

现在咱聊聊怎么实际操作！给大家说个小技巧，用localStorage存储密码超容易。当用户第一次登陆账号时，只需要把他们的用户名跟密码保存到本地的localStorage中。然后下次再访问网站时，系统会自动检测localStorage中有无这些信息，如果有的话，就能直接用这个信息登录，免得再次输入那么繁琐~

安全性问题

关于保存密码，咱们得把安全放在第一位。其实，虽然localStorage挺好用，但是它也有隐患。比如某人直接控制你的电脑，就能轻易查到你存储在那里面的信息。所以，用这个功能时，别忘了做好防护措施，比如给密码加密啥的。

清除localStorage的方法

虽然localStorage挺好用，不过有时候还是要清理一下。可能你要切换账户了，或者觉得不够安全。清除localStorage可别担心，浏览器设置里面就能操作，或者在控制台用JavaScript代码搞定咯。

实际操作案例

咱们来看个例子，比如你在网页上注册账号时候要输密码，这时候你点了”记住我”那就能把账号保存下来放到本地存储那里；要是下次再上来，网站就会自动帮你填好这些内容，省去了再次输入的麻烦！

调试和故障排除

nbsp;html>
    
    
    
    form{
        width: 300px;
        padding: 10px 0px 20px 30px;
        height:auto;
        border-radius: 6px;
        border-left:8px solid #19a049;
        background:#eee;
        margin:100px auto;
    }
    #user,#pass{
        padding: 8px;
        outline: none;
        background: transparent;
        border:1px solid #999;
        margin-top: 5px;
    }
    #sub{
        padding: 6px;
        outline: none;
        border:none;
        background: #19a049;
        color:#fff;
        width: 150px;
        border-radius: 6px;
        cursor: pointer;
    }

    

用localStorage有时候也会出点差错，比如存不了、读错等等。那么咱们就得学习下怎么排查解决这些麻烦事！首先，瞧瞧localStorage是不是设置或读取的有问题；其次，看看是不是其他什么代码搞乱了localStorage的运行。

总结

这次咱们一起聊聊，让你明明白白地搞清楚localStorage这个东西到底怎么回事，然后把它用得溜溜转！不过得牢记，无论啥时候都是以安全为重所以使起来得小心点儿，别让用户的信息出了岔子。

朋友们，问问你们哦：用localStorage遇见过啥烦心事吗？是咋应对滴？快来评论区分享下！别忘了给这篇文章点个赞再转发咱们一块儿学，一块儿涨姿势！