浏覽器端存儲方式彙總

1、存儲方式分類

（1）Local Storage

（2）Session Storage

（3）IndexedDB

（4）Web SQL

（5）Cookie

2、差別

​

​localStorage​

​ 中的鍵值對是以字元串的形式存儲，除非清除，否則長期有效。

Session Storage資料在頁面會話結束時會被清除。

  IndexedDB 是一個事務型的資料庫系統. 然而, 它是使用 JavaScript 對象而非列數固定的表格來儲存資料的.使用的比較少。

（4）cookie

HTTP Cookie（也叫Web Cookie或浏覽器Cookie）是伺服器發送到使用者浏覽器并儲存在本地的一小塊資料，它會在浏覽器下次向同一伺服器再發起請求時被攜帶并發送到伺服器上。通常，它用于告知服務端兩個請求是否來自同一浏覽器，如保持使用者的登入狀态。

Cookie主要用于以下三個方面：

• 會話狀态管理（如使用者登入狀态、購物車、遊戲分數或其它需要記錄的資訊）
• 個性化設定（如使用者自定義設定、主題等）
• 浏覽器行為跟蹤（如跟蹤分析使用者行為等）

屬性說明：

​Expires​

​或者​

​Max-Age：設定有效期。​

​Secure​

​ ：使用https協定

​HttpOnly​

​ ：不能使用js擷取cookie

​Domain​

​ 辨別指定了哪些主機可以接受Cookie。如果不指定，預設為目前文檔的主機（不包含子域名）。如果指定了​

​Domain​

​，則一般包含子域名。

例如，如果設定 ​

​Domain=mozilla.org​

​，則Cookie也包含在子域名中（如​

​developer.mozilla.org​

​）。

​Path​

​ 辨別指定了主機下的哪些路徑可以接受Cookie（該URL路徑必須存在于請求URL中）。以字元 ​

​%x2F​

​ ("/") 作為路徑分隔符，子路徑也會被比對。

例如，設定 ​

​Path=/docs​

​，則以下位址都會比對：

• ​/docs​

• ​/docs/Web/​

• ​/docs/Web/HTTP​

cookie可能造成CRRF:

比如在不安全聊天室或論壇上的一張圖檔，它實際上是一個給你銀行伺服器發送提現的請求：

<img src="http://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory">      

當你打開含有了這張圖檔的HTML頁面時，如果你之前已經登入了你的銀行帳号并且Cookie仍然有效（還沒有其它驗證步驟），你銀行裡的錢很可能會被自動轉走。

作者：孟繁貴