限制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');
複製代碼