xing-chuan

限制cookie滥用,可以用localStorage替代大部分cookie功能
不同浏览器对域名下 cookie 的大小和数量是有限制的,cookie 的容量有限,珍贵的空间还是留给和服务器交互...
扫描右侧二维码阅读全文
06
2019/05

限制cookie滥用,可以用localStorage替代大部分cookie功能

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

很多网站会使用第三方的统计、abtest等等js插件,也会占用你宝贵的 cookie,而且是非常多。

IE8 之后的浏览器都开始支持 localStorage,容量以 M 为单位,给我们不少畅想,如果我们用本地的 localStorage 成功模拟 cookie 的特性,想来可以给 cookie 减负很多。

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

Github 地址: https://github.com/Xing-Chuan/locally-cookie

由于利用原生 localStorage API,会有以下限制

  • 支持IE8+
  • 支持存储在当前域名(主域或二级域),不支持跨域

原理

使用 set 方法后,localStorage 中会生成带前缀的 key,防止与其他 key 冲突。其中有两个独特的 key,lc_keylistlc_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');
最后修改:2019 年 05 月 06 日 10 : 33 AM
如果觉得我的文章对你有用,请随意赞赏

发表评论