本地存儲vs Cookie

Question

我想通過將所有cookie移動到本地存儲中來減少我的網站上的加載時間，因爲它們似乎具有相同的功能。除了明顯的兼容性問題之外，使用本地存儲替換Cookie功能是否有任何優點/缺點（特別是性能方面）？

Answer 1

Cookie和本地存儲服務於不同目的。 Cookie主要用於讀取服務器端，本地存儲只能由客戶端讀取。所以問題是，在您的應用程序中，誰需要此數據—客戶端或服務器？

如果是您的客戶端（您的JavaScript），那麼通過一切手段切換。您通過發送每個HTTP標頭中的所有數據來浪費帶寬。

如果它是你的服務器，本地存儲沒有那麼有用，因爲你必須以某種方式轉發數據（使用Ajax或隱藏的表單域或其他）。如果服務器只需要每個請求的總數據的一小部分，這可能是好的。

儘管如此，您仍然希望將會話cookie作爲cookie保留。

按照技術差異，也是我的理解：

1. 除了被保存數據，餅乾給你的字節的限制的老辦法（4095，實際上） - 它的每個cookie。本地存儲是每個域大如5MB - SO Question也提到它

2. localStorage是Storage接口的實現。它存儲的數據爲無過期日期，並通過JavaScript清除只有或清除瀏覽器緩存/本地存儲的數據 - 不像cookie過期。

Answer 2

那麼，本地存儲速度很大程度上取決於客戶端使用的瀏覽器以及操作系統。 Mac上的Chrome或Safari可能比PC上的Firefox快得多，特別是使用更新的API。與往常一樣，測試是你的朋友（我找不到任何基準）。

我真的沒有看到cookie與本地存儲的巨大差異。另外，您應該更加擔心兼容性問題：並非所有瀏覽器甚至已經開始支持新的HTML5 API，因此Cookie對於速度和兼容性來說是最好的選擇。

Answer 3

隨着localStorage，網絡應用程序可以在用戶的​​瀏覽器本地存儲數據。在HTML5之前，應用程序數據必須存儲在cookie中，幷包含在每個服務器請求中。 localStorage更安全，並且可以在本地存儲大量數據，而不會影響網站的性能。雖然localStorage更現代化，但這兩種技術都有一些優點和缺點。

餅乾

優點

• 傳統支持（它已經撒手人寰）
• 持久數據
• 到期日期

缺點

個
• 每個域存儲其所有cookie在一個字符串，它可以使 解析數據難以
• 數據是加密的，因爲......雖然 體積小，cookie與每個HTTP發送這成爲一個問題請求限定尺寸 （4KB）
• SQL注入可以從cookie

本地存儲

優點進行

• 支持大多數流行的瀏覽器是直接存儲在瀏覽器
• 持久數據
• 同樣的原產地規則適用於本地存儲數據
• 是不是每個每個HTTP請求
• 〜5MB存儲發送域（這是5120KB）

缺點

• 不支持之前的任何內容：IE 8，Firefox 3.5，Safari 4，Chrome 4，Opera 10.5，iOS 2.0，Android 2.0
• 如果服務器需要存儲客戶端信息，您有意將其發送到 。

localStorage用法與第一次使用幾乎相同。他們有非常確切的方法，所以從會話切換到localStorage真的是小孩子的遊戲。但是，如果存儲的數據對於您的應用程序非常重要，那麼在localStorage不可用的情況下，您可能會使用cookie作爲備份。 「安全（SSL）頁被隔離的localStorage值」

/* 
* function body that test if storage is available 
* returns true if localStorage is available and false if it's not 
*/ 
function lsTest(){ 
    var test = 'test'; 
    try { 
     localStorage.setItem(test, test); 
     localStorage.removeItem(test); 
     return true; 
    } catch(e) { 
     return false; 
    } 
} 

/* 
* execute Test and run our custom script 
*/ 
if(lsTest()) { 
    // window.sessionStorage.setItem(name, 1); // session and storage methods are very similar 
    window.localStorage.setItem(name, 1); 
    console.log('localStorage where used'); // log 
} else { 
    document.cookie="name=1; expires=Mon, 28 Mar 2016 12:00:00 UTC"; 
    console.log('Cookie where used'); // log 
} 

有人注意到保持：如果您要檢查localStorage瀏覽器的支持，所有你需要做的就是運行這個簡單的腳本請注意，如果您從「http」切換到「https」受保護的協議，localStorage將不會是 ，其中 cookie仍將被訪問。這對 很重要，請注意您是否使用安全協議。

Answer 4

在JWTs的上下文中，Stormpath已經寫了相當有幫助的文章概述了可能的方式來存儲它們，並且（解散）的優點涉及每個方法。

它還簡要介紹了XSS和CSRF攻擊，以及如何對付它們。

我附上了以下文章的一些簡短片段，以防他們的文章脫機/他們的網站出現故障。

本地存儲

問題：

Web存儲（localStorage的/ sessionStorage的）是通過JavaScript在同一個域訪問。這意味着您網站上運行的任何JavaScript都將有權訪問Web存儲，並且因此可能容易受到跨站點腳本攻擊（XSS）的攻擊。簡而言之，XSS是一種攻擊者可以注入將在您的頁面上運行的JavaScript的漏洞。基本的XSS攻擊嘗試通過表單輸入注入JavaScript，攻擊者在這裏輸入警報（'你被黑客攻擊'）;轉換成表格以查看它是否由瀏覽器運行並且可以被其他用戶查看。

預防：

爲了防止XSS，常見的反應是逃避和編碼所有不可信數據。但這遠不是完整的故事。 2015年，現代網絡應用使用託管在CDN或外部基礎架構上的JavaScript。現代Web應用程序包括用於A/B測試，漏斗/市場分析和廣告的第三方JavaScript庫。我們使用像Bower這樣的軟件包管理器將其他人的代碼導入到我們的應用中。

如果您使用的腳本中只有一個受到危害，該怎麼辦？惡意 JavaScript可以嵌入在頁面中，Web存儲被 損害。這些類型的XSS攻擊可以在不知情的情況下訪問您網站的每個人的網絡存儲 。這可能是爲什麼一組組織建議不要在web存儲中存儲任何有價值的東西或信任任何信息。這包括會話標識符和 令牌。

作爲存儲機制，Web存儲不傳輸過程中執行任何安全 標準。誰讀網絡存儲和使用，必須 做盡職調查，以確保他們總是通過HTTPS 永不HTTP發送JWT。

餅乾

問題：

餅乾，與僅Http cookie的標誌一起使用時，不通過JavaScript訪問，並且是免疫的XSS。您還可以設置安全cookie標誌以保證cookie僅通過HTTPS發送。這是過去利用cookie存儲令牌或會話數據的主要原因之一。現代開發人員不願意使用cookie，因爲他們傳統上要求將狀態存儲在服務器上，從而打破了RESTful最佳實踐。如果您要在Cookie中存儲JWT，則作爲存儲機制的Cookie不需要將狀態存儲在服務器上。這是因爲JWT封裝了服務器爲請求提供服務所需的所有內容。

但是，Cookie容易受到不同類型的攻擊： 跨站點請求僞造（CSRF）。 CSRF攻擊是一種攻擊類型 ，當惡意網站，電子郵件或博客導致用戶的網絡瀏覽器在用戶當前通過身份驗證的受信任站點上執行不需要的操作時，會發生此類攻擊。這是瀏覽器如何處理cookie的一個漏洞。 Cookie只能發送到允許使用的 的域名。默認情況下，這是最初 設置cookie的域。無論您是在galaxies.com或hahagonnahackyou.com上，無論您使用的是否爲 ，cookie都會發送請求。

預防：

CSRF可以通過使用同步標記圖案來防止。這個 聽起來很複雜，但是所有現代web框架都支持 這個。

例如，AngularJS有一個解決方案來驗證該Cookie是 只能通過您的域訪問。直從AngularJS文檔：

當執行XHR請求時，$ http服務讀取來自一個 餅乾的令牌（默認XSRF-TOKEN）並將其設定爲一個HTTP頭 （X-XSRF-TOKEN）。由於只有在您的域上運行的JavaScript可以通過 讀取cookie，因此您的服務器可以確保XHR來自您的域上運行的 JavaScript。您可以通過包括xsrfToken JWT要求使這種CSRF保護 無狀態：

{ 
    "iss": "http://galaxies.com", 
    "exp": 1300819380, 
    "scopes": ["explorer", "solar-harvester", "seller"], 
    "sub": "tom@andromeda.com", 
    "xsrfToken": "d9b9714c-7ac0-42e0-8696-2dae95dbc33e" 
} 

利用你的Web應用程序框架的CSRF保護，使餅乾搖滾 固體，用於存儲JWT。 也可以通過檢查API的HTTP Referer和Origin頭來部分阻止CSRF。 CSRF 攻擊將具有Referer和Origin標頭，這些標頭與您的應用程序中的 無關。

完整的文章可以在這裏找到： https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/

他們還對如何最好地設計和實施JWTs一個有用的文章，關於令牌本身的結構： https://stormpath.com/blog/jwt-the-right-way/

Answer 5

本地存儲最多可以存儲10mb離線數據，而會話最多可以存儲5 MB數據。但Cookie可以僅以文本格式存儲4kb數據。

Answer 6

值得一提的是，當用戶在某些移動版本的Safari中以「私人」模式瀏覽時，不能使用localStorage。

從MDN（https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage）報價：

注：與iOS 5開始。1，Safari Mobile在 緩存文件夾中存儲localStorage數據，該緩存文件夾偶爾會被清理， 要求操作系統（通常在空間不足時）。 Safari Mobile的Private 瀏覽模式還會阻止完全寫入localStorage。