项目实战13—localStorage总结

1.是什么？
localStorage作为HTML5 Web Storage的API之一，主要作用是本地存储。本地存储是指将数据按照键值对的方式保存在客户端计算机中，直到用户或者脚本主动清除数据，否则该数据会一直存在。也就是说，使用了本地存储的数据将被持久化。
2.原理
2.1 API
localstorage 在浏览器的 API 有两个：localStorage 和sessionStorage，存在于 window 对象中：localStorage 对应 window.localStorage，sessionStorage 对应 window.sessionStorage。
localStorage 和 sessionStorage 的区别主要是在于其生存期。
2.2 特点
拓展了cookie的4kb的限制，存储空间达到5MB，相当于属于前端页面的一个数据库
无法被爬虫获取，相对安全，爬虫只能获取页面内容
只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。（sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。）
key-value数据类型，简单容易扩展，键是唯一的
localstorage原生是不支持设置过期时间
由于浏览器的安全策略，localstorage是无法跨域的，也无法让子域名继承父域名的localstorage数据。
只支持IE8以上的IE版本。
3.使用
保存到缓存：localStorage.setItem(“key”,“value”);
读取缓存中的数据：let data= localStorage.getItem(“key”);
删除缓存中的数据：localStorage.removeItem(“key”);
4…启示
选择使用一种技术，首先到对这种技术的性质特点有充分的了解，然后结合需求的使用场景，选择合适的技术。不能为了用而用，不考虑是否符合需求。比如页面的实时数据就不适合用缓存，因为localStorge里面的数据只要不手动清除就一直在，这样会导致第二次打开页面显示的是第一次的数据，所以这种情况不适合用，拿到数据直接渲染到页面比较适合。如果涉及到实时的显示到不同的页面，那么可以用父子页面传值的技术，能保证每一次打开的数据都是最新的，实时变化的数据不需要缓存存储。同时，像用户账号这种轻易不会改变的数据就适合存入缓存。