使用 local storage 存储页面产生的数据结果

今天在做年会的抽奖程序， 因为担心酒店现场的网络不稳定，所以搞了个离线版。为了防止关闭浏览器造成的抽奖结果丢失，所以想使用 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 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式