今天在做年会的抽奖程序， 因为担心酒店现场的网络不稳定，所以搞了个离线版。为了防止关闭浏览器造成的抽奖结果丢失，所以想使用 local storage 存储结果。这样即使意外导致页面关闭，重新打开之后依旧可以继续进行。
cookie 与 local storage 存储的区别
Cookie 是方便服务端读取，因为每次前端向后台发起请求都会带上本地的所有 cookie。
而 local storage 仅仅限于浏览器端读取。
Cookie 有 4096 个字节的大小限制，而 local storage 的限制则为 10M 每个域名。
Cookie 可以设置过期时限，而 local storage 除非通过 js 主动删除，否则会永久存储。
可见，local storage 非常适合存储不需要提交给服务端的数据，例如，用户访问的上一个网页是什么，方便在登录之后跳转会上一页。
基本操作
get/set/del
localStorage.setItem('framework', 'vuejs');
localStorage.setItem('city', 'yantai');
localStorage.getItem('framework');
> "vuejs"
localStorage.removeItem('framework');
查看所有 local storage
localStorage;
2 items in Storage framework="vuejs", city="yantai"
清空所有 local storage
localStorage.clear();
是否能够存储 array
测试了一下
localStorage.setItem('frameworks', ['vuejs', 'reactjs']);
localStorage.getItem('frameworks');
> "vuejs,reactjs"
看来是不支持，因为存进去的是 array, 读出来的是 string。
并且，这样做还有一个隐患就是特殊字符的转义问题。
所以，最佳的方案是使用 JSON.stringify() / JSON.parse(), 将 array 序列化之后再存入 local storage.
兼容性问题
IE8 及之后版本支持 local storage.
域名与二级域名是否共享 local storage
以 sunzhongwei.com 为例
- www.sunzhongwei.com 与 sunzhongwei.com 无法共享数据
- www.sunzhongwei.com 与 news.sunzhongwei.com 也无法共享数据
即，子域间并不能共享数据。
local storage 的大兄弟 session storage
local storage 是永不过期的，而 session storage 则恰好相反，只要关闭页面，就会被自动清空。
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式