IT工程師數位筆記本

前端數據存儲方案集合（cookie localStorage等）以及詳解 （二）

在之前的文章中已經介紹到了 前端存儲方案中的 cookie 。 但是 cookie 的存儲上限是 4KB。 如果超過了 4KB ，在獲取cookie 的時候會返回空值。

那如果存儲內容超過 4kb，我們該如何處理呢？

這里我們將分別 介紹 幾種前端存儲方式： localStorage， sessionStorage，websql 和indexeddb。

一、localStorage

1.1 localStorage 是什么？

是 被 W3C 標準化之后的網頁存儲的一種方式， 原本是屬于 HTML5 的存儲方案，后來被 獨立出來，適用于 IE 8+，FF 2+，Safari 4+，chrome 4+， Opera 10.50+。 （意思 就是 PC 上 和 H5 都可以愉快的使用啦~）

1.2 localStorage 如何使用

localStorage.getItem(key)          獲取指定key本地存儲的值
localStorage.setItem(key,value)  將value存儲到key字段
localStorage.removeItem(key)    刪除指定key本地存儲的值

1.3 注意事項

首先，我們進入瀏覽器看下 localStorage 長什么樣子。

對，就是這么就簡單， k / v  組成， 和cookie 的區別還是 挺大的。 沒有 path time 等等限制。

1）存儲時間： localStorage的存儲周期比sessionStorage 長 (這里的 sessionStorage 我們會在下文中介紹到) ，如果用戶不清理的話，是可以永久存儲的。

2）訪問限制： 另外 也有訪問的限制， localStorage 與 sessionStorage雖然相似，但是訪問限制卻不盡相同，localStorage的訪問域默認設定為設置localStorage的當前域，其他域名不可以取。這點與sessionStorage相同，但是與sessionStorage不同的是，localStorage設定后，新開tab是可以訪問到的。

3）大小限制及檢測  標準建議對于每個domain，localStorage大小為5M，達到限制時瀏覽器可以去問用戶是否允許增加存儲空間。

4）可以用來干嘛？  因為 localStorage 可以長期存儲，只要用戶不刻意去清除。 那么我們往往可以提前存入一些 用戶需要訪問，而且還是需要 服務器加載的文件等等。 這樣一方面可以加快頁面加載速度。另外一方面也可以 減少服務器壓力。

二、sessionStorage

這里說的 sessionStorage 和 localStorage 的區別就在于， 用戶關掉了 瀏覽器的當前頁。 sessionStorage 存儲的數據就銷毀掉了。

1.1 用法

sessionStorage.getItem(key)          獲取指定key本地存儲的值
sessionStorage.setItem(key,value)  將value存儲到key字段
sessionStorage.removeItem(key)    刪除指定key本地存儲的值

1.2 訪問限制

當前 tab 存儲的 sessionStorage， 只能在 當前 tab頁才能訪問到， 如果 打開同樣域名的 tab 去訪問 之前 tab頁 存儲的 sessionStorage 是無法讀取到的。

所以 sessionStorage 是一個 tab 級別的 存儲。

1.3 可以做什么？

當然，這么弱的 存儲功能可以做什么 呢？ 要相信存在即是 合理的。

最常見的一個功能就是，如果 我們在 視頻網站看視頻不小心刷新了 某個我們正在播放視頻的頁面。 這個時候 視頻的進度條會提示你 上次播放時間， 是否繼續上次的播放， 其實 這個時間就可以保存到 sessionStorage 。 可能這只是比較牽強的一個例子。 大概就是這么使用

三、websql與indexeddb

前面講到了 sessionStorage  和 localStorage 。 這里介紹的 websql與indexeddb 和之前的二者 是有一定 區別的。

1.1 websql

1） 是什么？

    websql更像是關系型數據庫，并且使用sql語句進行操作。

2） 注意事項

    雖然現在 websql 已經不再繼續維護了， 但是因為 它的起步早，所以兼容性是 異常的OK 的。
    如果遇到了 兼容性相關的問題，websql 是一個不錯的選擇。

1.2 indexedDB

1）是什么？

2） 訪問權限：

indexedDB 和 websql 在訪問權限上 和 localStorage 是一致的。 均是只能子啊創建數據庫下的域名才能訪問，而且不能指定訪問域名。

3) 存儲時間： 同樣是永久，除非用戶清除數據

4) 可以做什么？

當我們是在做一個離線應用，或者webapp的時候，可以考慮使用本地數據庫中存取數據。如果不存大量的數據的話，其實localStorage就夠用了。亦或者，你想把一張用戶的皮膚圖片之類的大量數據存入客戶端緩存起來，localStorage已經不夠用了的話，也可以嘗試一下websql與indexeddb。