localStorage的基本概念
Local Storage就是个保存网页信息的东西，它就在你电脑上的浏览器里藏着。用起来很简单，就像放钥匙配锁那样，用个’key`做把钥匙，再用个’value‘当锁定的值，就能永久储存网站数据了。比起Cookie，Local Storage存储空间大得多，安全保障也更强。因为网站数据都直接储存在用户机器上，读写速度杠杠的！而且，如果多个跟你登陆的域名相关的网站都开着，那么这些网站就可以共用这个Local Storage，让你的使用还能更加顺畅！
开发小伙伴经常会用localStorage这个小东西来保存用户喜好啊、账号登入啥的，还有购物车里那些心仪商品的信息，这样就能让用户的用网过程更流畅。攒在浏览器里的这些数据，就算刷新或者关了浏览器也不会消失，就像个小伙伴陪你一起上网，暖暖哒！
本地存储和会话储存，有啥不一样？
除了大家熟知的localStorage之外，还有另外一个叫sessionStorage的东西。两者最关键的不同，就是数据能储存多久。用localStorage存的资料，只要你不手动清理缓存或者网站做清理动作，就能一直留在电脑里；可是sessionStorage就有点特别了，它保存的内容只有你正在浏览的那段时间有用，关掉标签页或者浏览器，这些信息就都没了。
所以如果要保存长时间的数据又要在页面间分享的话，那就选localStorage吧；要是只是暂时存个数据或无需共用信息的话，sessionStorage也不错！最重要的是看你具体业务需要啥样的存储办法啦～
localStorage与cookie的比较
虽然 localStorage 跟 cookie 都能让你把数据记在电脑上，但它们的用处其实各有不同。首先来说，cookie 最多也就存个几千字符大的东西，而 localStorage 就厉害了，它可以装得下几个兆那么多；再来就是安全问题，cookie 的内容会长篇大论地出现在 HTTP 请求头上，这样一来，大家都能看到，也可能会有人恶意篡改它。但是 localStorage 却能躲藏起来，只在自己的浏览器里默默工作，因此相对安全许多。
再说一遍，跨网域同步数据这事儿，也是有区别的！cookie，你把它的 domain 属性搞一搞就能实现各子域名间的共享啦；但 localStorage 就不一样了，它只在同一个网址内互通有无。所以，如果你管的是几个子域名的网站，又得让它们互相分享点东西的话，那 cookie 说不定还真挺实用。
如何使用localStorage
操作JavaScript的本地存储就像玩儿似的，用window.localStorage对象就行！它有setItem、getItem、removeItem这些小助手帮你忙。比如说这样：
javascript //存储数据 你可以试试把用户名设成Alice，在本地存储里面。 //读取数据 直接拿用户名，就在本地存储里（localStorage）那。 //删除数据 清空下我们保存的用户名哦(本地存储中删除'username')。
用的时候别存密码之类的重要信息，还有记得应对突发状况，保证程序正常运行。记住了，存复杂对象要先把它转成JSON字符才能处理。
局限性与解决方案
其实localStorage挺好的方便又好用，但是它还是有个缺点。就是有些旧版或者特定场合就用不了了。还有，它比cookie安全点，但是还不是那么靠谱，还是有可能被黑客什么的找漏洞侵入。
针对这些问题，我们开发者也有一些办法能让咱们的应用程序更安全更好用。比如，先看看支不支持 localStorage，再看看是不是开了隐私模式；重要信息得搞加密;过期或者没用的数据也要经常清理掉等等。
实际应用场景
接下来，我们步入现实生活中的几个小例子。你见过在浏览网页时，它总能记得你的账号密码吗？它其实是通过localStorage实现的！还有一个常见的，就是许多网站会让你保存自己喜欢的样式和设置，这个也是利用了localStorage来操作的。再举个栗子，在线商城的购物车，或者你收藏的宝贝，都是用localStorage放好的。至于像编辑器这类的软件，为了防止你辛苦编写的东西因为关掉窗口就消失不见，也常常用到这个技术。
看了这么多实际的例子，你会发现 localStorage 已经被广泛用在前端开发里，给用户体验和功能拓展提供了很多方便。
评论0