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

更新日期: 2017-01-21 阅读次数: 10956 分类: Javascript

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