localStorage vs sessionStorage vs Cookies – 詳細比較

Cookie 已經存在很長時間了（Internet Explorer v2 於 1995 年 10 月支持它們）。 它們沒有任何問題，它們確實讓網絡變得更令人愉快，但近 25 年後發生了很多變化。

本地存儲（您可以在 W3 的 Web 存儲下找到它）是也不是 cookie 的替代品。 這就是它最令人困惑的地方。 在大多數情況下，您可以安全地使用 localStorage 而不是 cookie，並獲得（錯誤的）印象，即它們是相同的，而實際上它們不是。 繼續閱讀以了解如何以及何時使用 localStorage 替換 cookie 的嚴肅細分。

革命還是進化？

本地存儲，或 localStorage，或 DOM 存儲或 Web 存儲（我不是在編造這些名稱；它們都在使用，並且都引用相同的東西）在 2012 年作為“HTML5”在流行瀏覽器中被實際採用特徵”。 這似乎是餅乾的天賜之物。 修復了一直攜帶不需要的數據的臃腫請求和大小限制。 雖然它確實“解決”了這些問題，但它並不是餅乾的蘋果換蘋果替代品。

當我們討論不需要的數據時。 您是否知道請求並不是唯一會導致不必要的膨脹的東西，您的網站也可以。 幸運的是，有一個解決方案，它被稱為 WP Reset。

WP Reset 是一個帶有一系列重置選項的插件，可讓您執行諸如從您的站點中刪除累積數據和/或附加組件（插件、主題、用戶、小部件、內容等）等操作，以及甚至將整個網站擦乾淨。 很神奇，對吧？ 但這還不是全部。 除其他功能外，此插件可以創建數據庫快照以及插件和主題集合，您可以根據需要多次單擊安裝。 絕對是值得一試的工具。

但是，現在，讓我們回到討論 localStorage。

顧名思義，數據存儲在本地，在用戶的設備上。 因此，它不必通過網絡傳輸每個 HTTP 請求，從而減少佔用空間並為我們提供更多空間來保存數據。 “僅限本地”範式是 cookie 和本地存儲之間最顯著的區別。 Cookies 可以在服務器端和客戶端讀取，本地存儲只能在客戶端。 這裡的所有都是它的。 如果您的應用程序嚴重依賴於讀取服務器端 cookie 並基於它生成內容，那麼切換到本地存儲將意味著重寫應用程序。 如果您只使用 cookie 來存儲設置，例如界面中哪個選項卡處於活動狀態，那麼本地存儲是一個理想的替代品。

看似相似

下表清晰地展示了 cookie、localStorage 和 sessionStorage 的區別和用例。 雖然您可以快速瀏覽它以獲得所需的答案並離開，但我建議您閱讀一些冗長的腳註，其中包含更多細節。 是的，我知道你很忙，想觀看下一個貓視頻，但事情不是非黑即白的，所以深入挖掘會對你有好處。

深入挖掘網絡存儲和 cookie

您可以在本地存儲的最大數據量取決於瀏覽器。 沒有任何保證，如果您想要一個安全的賭注，請低於 5 MB 到大約 2 MB。 使用這個方便的工具來測試瀏覽器中允許的最大本地存儲大小。

用戶阻止第 3 方或所有 cookie是一種常見情況。 相同的規則適用於本地存儲。 沒有任何保證，您的應用程序必須在本地存儲不可用的環境中工作（或至少不中斷）。

所有cookie 都會在某個時候過期，但人們傾向於將生命週期設置為幾年，這在互聯網時代似乎是永遠的。 另一方面，本地存儲永遠不會過期，並且在應用程序或用戶刪除它之前可用。 當選項卡或窗口關閉時，會話存儲會被清除——沒有例外。

“你的意思是只能保存字符串？ 我一直在保存物品！” JSON 使您能夠以字符串的形式保存對象和其他數據類型。 轉換是在您不知情的情況下通過閱讀和寫作完成的。 有了用於處理 cookie 和本地存儲的健全庫，您就不必考慮數據類型。 但是，這並沒有改變僅原生支持字符串的事實。

沒有一個客戶端功能是所有瀏覽器都支持的。 這是一個可悲的事實，但仍然是事實。 您可以在 Can I Use 上查看具體數字，但就 cookie 和本地存儲而言，我會忽略所有不支持它們的瀏覽器。 它們是邊緣的，低於 1%。

您不能僅通過服務器端處理訪問 localStorage。 你也需要JS。 當用戶請求一個頁面並且 PHP 啟動（或您使用的任何服務器端語言）來生成它時，您將無法訪問任何本地數據、會話或永久數據。 一旦頁面加載並且 JS 啟動，您就可以訪問本地數據並做任何您需要的事情 - 調整用戶界面或利用 AJAX 將本地數據發送回服務器。 所以是的，您可以將本地數據返回到服務器，但與使用 cookie 的方式和時間不同。 根據您的要求，在從 cookie 切換到本地存儲時，這可能會破壞交易，所以，請 - 提前計劃！

使用本地存儲，客戶端和服務器之間不會傳輸任何數據（除非有明確的代碼）。 這對於減小有效載荷大小非常有用。 另一方面，Cookie 會作為 HTTP 標頭字段與設置域上的每個請求一起傳輸。 這無法更改或有選擇地關閉。

用戶“不應該”訪問本地數據並直接更改它（在您的應用程序之外），但沒有什麼能阻止他們這樣做。 有許多調試工具可用於編輯本地存儲的數據。 所以不要相信本地數據或假設用戶沒有觸摸它。 總是假設更糟。

雖然cookie 確實具有您可以設置的“安全”屬性，但這並不能保護從應用程序傳輸到瀏覽器的 cookie。 所以總比沒有好，但遠非安全。 本地存儲是一種僅限客戶端的技術，它不知道也不關心您使用的是 HTTP 還是 HTTPS。 安全性必須來自您處理數據的方式。 不要在任何形式的本地存儲中存儲任何敏感數據，例如信用卡號或密碼！ 曾經！

一些代碼讓你開始

這篇文章並不是一個 JavaScript 網絡存儲教程，而是為了省去你的麻煩，這裡有一個帶有本地存儲的 Hello World 示例；

// store a value
localStorage.setItem( 'name', 'John' );

// retrieve a value
localStorage.getItem( 'name' );

// remove the value
localStorage.removeItem( 'name' );

// only string values can be stored so for objects, use JSON
var post = {
  title: 'Cookies are old',
  author: 'Gordan'
}
localStorage.setItem( 'post', JSON.stringify( post ) );

// and to retrieve
var post = JSON.parse( localStorage.getItem( 'post' ) );

上面的代碼有效，並且盡可能簡單。 但是，我不建議使用它。 與 cookie 一樣，沒有人使用document.cookies與它們進行交互。 需要考慮一些小的跨瀏覽器差異，並且由於它們只存儲字符串，因此您必須在每次讀取和寫入時使用 JSON 進行字符串化和解析。 這就是我們使用小型庫來幫助我們處理 js-cookie 等 cookie 的原因。 本地存儲也是如此。 從長遠來看，在代碼和 API 之間放置一個小的抽象層會有所幫助。 我推薦 store.js。 它已經存在了一段時間，負責處理跨瀏覽器的廢話和後備問題，甚至還有方便的插件來擴展其功能。 如果您對一些編碼練習感興趣，請創建自己的庫並將其轉換為 jQuery 插件。

餅乾很糟糕，對吧？ 我們需要一些新的東西！

餅乾還不錯。 幾十年來，他們一直在為自己的目標服務，並將繼續這樣做，因為本地存儲不是“以蘋果換蘋果”的替代品。 然而，餅乾顯示出老化的跡象。 除此之外，他們的一些設計缺陷也不會很快消失。 即使用 cookie 有效負載和較小的最大有效負載大小“污染”域上的每個請求。

cookie 是否不足和是否陳舊，都將繼續存在，因此不要認為本地存儲會很快完全接管。 但是，在某些用例中，本地存儲無疑是更好的選擇。

如果您有（大量）數據要存儲在客戶端，這些數據很少傳輸到服務器，並且這些數據不包含任何敏感信息 -開始使用本地存儲！ 這正是它的創建目的。 您將通過減輕域上的所有 HTTP 請求來創建更快的應用程序，並獲得使用新事物的溫暖模糊感覺。