localStorage、sessionStorage、cookie、session幾種web數據存儲方式對比總結

cookie 和 session

cookie 和 session 都是廣泛用來跟蹤瀏覽用戶身份的會話方式。

cookie 和 session 區別

• cookie 數據存放在客戶端，session 數據放在服務器端。
• cookie 自己並不安全，考慮到安全應當使用 session。
• session 會在必定時間內保存在服務器上。若是訪問量比較大，會比較消耗服務器的性能。考慮到減輕服務器性能方面的開銷，應當使用 cookie 。
• 單個 cookie 保存的數據不能超過 4K，不少瀏覽器都限制一個域名最多保存 50 個 cookie。 將登錄信息等重要信息存放爲 session、其餘信息若是須要保留，能夠放在 cookie 中。

session 主要是服務端使用處理數據，本文主要針對前端技術故很少贅述。

cookie 的使用

cookie 可經過 document.cookie 獲取所有 cookie。它是一段字符串，是鍵值對的形式。操做起來有些麻煩，可引入封裝好的庫進行使用，好比 js-cookie點我。API 也很簡潔：

Cookies.set("name", "value", { expires: 7 }); // 設置一個cookie，7天后失效

Cookies.get("name"); // => 'value'

Cookies.remove("name");
複製代碼

localStorage 和 sessionStorage

在 web 本地存儲場景上，cookie 的使用受到種種限制，最關鍵的就是存儲容量過小和數據沒法持久化存儲。

在 HTML 5 的標準下，出現了 localStorage 和 sessionStorage 供咱們使用。

• cookie、localStorage 以及 sessionStorage 的異同點：

分類	生命週期	存儲容量	存儲位置
cookie	默認保存在內存中，隨瀏覽器關閉失效（若是設置過時時間，在到過時時間後失效）	4KB	保存在客戶端，每次請求時都會帶上
localStorage	理論上永久有效的，除非主動清除。	4.98MB（不一樣瀏覽器狀況不一樣，safari 2.49M）	保存在客戶端，不與服務端交互。節省網絡流量
sessionStorage	僅在當前網頁會話下有效，關閉頁面或瀏覽器後會被清除。	4.98MB（部分瀏覽器沒有限制）	同上

• 應用場景：localStorage 適合持久化緩存數據，好比頁面的默認偏好配置等；sessionStorage 適合一次性臨時數據保存。

WebStorage( localStorage 和 sessionStorage ) 自己就提供了比較好用的方法：

localStorage.setItem("name", "value");
localStorage.getItem("name"); // => 'value'
localStorage.removeItem("name");
localStorage.clear(); // 刪除全部數據

sessionStorage.setItem("name", "value");
sessionStorage.setItem("name");
sessionStorage.setItem("name");
sessionStorage.clear();
複製代碼

注意事項：

• localStorage 寫入的時候，若是超出容量會報錯，但以前保存的數據不會丟失。
• localStorage 存儲容量快要滿的時候，getItem 方法性能會急劇降低。
• web storage 在保存複雜數據類型時，較爲依賴 JSON.stringify，在移動端性能問題比較明顯。

瀏覽器兼容性

cookie 兼容性徹底沒問題；localStorage 和 sessionStorage 也支持 IE8+ 的瀏覽器，基本均可以正常使用。

課外

另外留個小問題，除了手動設置 localStorage.clear()，還有哪些方式會丟失 localStorage？

關於咱們

快狗打車前端團隊專一前端技術分享，按期推送高質量文章，歡迎關注點贊。 文章同步發佈在公衆號喲，想要第一時間獲得最新的資訊，just scan it ！

參考

• localStorage - MDN
• web storage 測試
• 各瀏覽器 Cookie 大小、個數限制