限制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');
复制代码