限制cookie滥用，能够用localStorage替代大部分cookie功能

不一样浏览器对域名下 cookie 的大小和数量是有限制的，cookie 的容量有限，珍贵的空间仍是留给和服务器交互用吧。

不少网站会使用第三方的统计、abtest等等js插件，也会占用你宝贵的 cookie，并且是很是多。

IE8 以后的浏览器都开始支持 localStorage，容量以 M 为单位，给咱们很多畅想，若是咱们用本地的 localStorage 成功模拟 cookie 的特性，想来能够给 cookie 减负不少。

基于如下，我写了一个库 locally-cookie，目前已经在项目中稳定运行几个月了。

Github 地址: github.com/Xing-Chuan/…

因为利用原生 localStorage API，会有如下限制

• 支持IE8+
• 支持存储在当前域名（主域或二级域），不支持跨域

原理

使用 set 方法后，localStorage 中会生成带前缀的 key，防止与其余 key 冲突。其中有两个独特的 key，lc_keylist 与 lc_sessionid，具体做用后面详述。

咱们须要存储 3 种数据：

• session 数据，随浏览器关闭而清除
• 时效数据，能够存储几小时、几天
• 永久数据，能够存储 long time

能达到上诉 3 点，除了不能跨二级域共享，与 cookie 基本一致了。

时效数据和永久数据很好处理，只要 set 时保留时间戳，取值时对比就能够了。

但要存储 session 数据，有一个问题首先要解决，怎么监听浏览器关闭的动做？有一个事件 onbeforeunload，咱们能够经过它作一些事，但它并非 100% 可靠的，可能你死机了，浏览器进程直接被 kill 掉，咱们指望能够 100% 可靠。其实能够的，咱们延后处理数据，在你取值的时候，再作处理。

咱们能够利用浏览器的特性，在 localStorage 和浏览器 cookie 中保存同一个 sessionid，若是两方不一致，就说明浏览器关闭过了，并且与浏览器 session cookie 的周期一致，兼容性很好。

因此我本地保存的数据结构是这样的

{"expires":1557317410965,"value":[1,"5",99]}
复制代码

expires 是数据生成时的时间戳，若是为 0, 就是 session 数据，浏览器关闭行为后失效。

数据存储支持字符串、数组、对象、数值、布尔值。

由于咱们延后处理数据，在浏览器关闭时不会删除过时数据。当取数据时，判断时间戳是否过时，过时则删除数据，返回 null。若是是 session 数据，咱们须要对比session id 是否一致，不一致时初始化 session 数据，依据 keylist 清空全部过时 session 数据，并在 keylist 中清除key

安装

npm i -S locally-cookie
复制代码

API

设置 set

/** * 参数说明 * key {String} 键，必填 * value {String|Boolean|Number|Array|Object} 值，必填 * day {Number} 0 session 数据，关闭浏览器失效 | 1，2... 1天，2天后失效 | -1 理论永久有效，选填 默认为 0 */
localCookie.set('key', value, [day]);
复制代码

获取 get

/** * 参数说明 * key {String} 键，必填 */
localCookie.get('key');
复制代码

删除 del

/** * 参数说明 * key {String} 键，必填 */
localCookie.del('key');
复制代码

设置的某个key是否还存在 has

/** * 参数说明 * key {String} 键，必填 */
localCookie.has('key');
复制代码