隨著Web應用程式的出現，直接在客戶端儲存使用者資訊的需求也隨之出現。這背後的想法是合理的：與特定使用者相關的資訊應該儲存在使用者的機器上。無論是登入資訊、個人偏好，還是其他資料，Web應用程式提供者都需要有辦法把它們儲存在客戶端。對該問題的第一個解決方案就是cookie。今天，cookie只是在客戶端儲存資料的一個選項。

cookie

HTTP cookie也叫作cookie，最初用於在客戶端儲存會話資訊。這個規範要求伺服器在響應HTTP請求時，通過傳送Set-Cookie HTTP頭部包含會話資訊。例如，下面是包含這個頭部的一個HTTP響應：

Content-type: text/html
Set-Cookie: name=value
other-header: other-header-value
 

這個HTTP響應會設定一個名為"name"，值為"value"的cookie。名和值在傳送時都會經過URL編碼。瀏覽器會儲存這些會話資訊，並在之後的每個請求中都會通過HTTP頭部cookie再將它們發回伺服器,比如

Cookie: name=value
other-header: other-header-value

這些傳送回伺服器的額外資訊可用於唯一標識傳送請求的客戶端。
客戶端通過讀取Cookies，得知你的相關資訊，就可以做出相應的動作，如在頁面顯示歡迎你的標語，或者讓你不用輸入ID、密碼就直接登入等等。

Web Storage

Web Storage的目的是解決通過客戶端儲存不需要頻繁傳送回伺服器的資料時使用cookie的問題Web Storage定義了兩個物件：localStorage和sessionStorage。localStorage是永久儲存機制，sessionStorage是跨會話的儲存機制。這兩種瀏覽器儲存API提供了在瀏覽器中不受頁面重新整理影響而儲存資料的兩種方式

sessionStorage物件

sessionStorage物件只儲存會話資料，這意味著資料只會儲存到瀏覽器關閉。這跟瀏覽器關閉時會消失的會話cookie類似。儲存在sessionStorage中的資料不受頁面重新整理影響，可以在瀏覽器崩潰並重啟後恢復,並且只能由最初儲存資料的頁面使用，在多頁應用程式中的用處有限。

使用方法

// 使用方法儲存資料
sessionStorage.setItem('name', 'baobei')

// 使用屬性儲存資料
sessionStorage.book = 'Javascript'

// 使用方法取得資料
let name = sessionStorage.getItem('name')

// 使用屬性獲取資料
let book = sessionStorage.book
 

所有現代瀏覽器在實現儲存寫入時都使用了同步阻塞方式，因此資料會被立即提交到儲存
要從sessionStorage中刪除資料，可以使用delete操作符直接刪除物件屬性，也可以使用removeItem()方法。

// 使用delete刪除值
delete sessionStorage.name

// 使用方法刪除值
sessionStorage.removeItem('book')

sessionStorage物件應該主要用於儲存只在會話期間有效的小塊資料。如果需要跨會話持久儲存資料，可以使用localStorage

localStorage物件

要訪問同一個localStorage物件，頁面必須來自同一個域（子域不可以）、在相同的埠上使用相同的協議
localStorage物件操作資料的方法和sessionStorage方法類似,這裡就不展開寫了
兩種儲存方法的區別在於，儲存在localStorage中的資料會保留到通過JavaScript刪除或者使用者清除瀏覽器快取。localStorage資料不受頁面重新整理影響，也不會因關閉視窗、標籤頁或重新啟動瀏覽器而丟失

總結：

1. 資料儲存方式
   cookie在瀏覽器和伺服器之間通過header來回傳遞，cookie的資料還有路徑（path）的概念，可以限制cookie只屬於某個路徑下，sessionStorage和localStorage不會自動把資料傳送給伺服器，僅在本地儲存
2. 大小限制
   cookie資料不能超過4k，session Storage和local Storage能達到5M
3. 有效時間
   sessionStorage：僅在當前瀏覽器視窗關閉之前有效；
   localStorage：始終有效，視窗或瀏覽器關閉也一直儲存，因此用作持久資料；
   cookie：只在設定的cookie過期時間之前有效，即使視窗關閉或瀏覽器關閉
4. 作用域不同
   sessionStorage: 不在不同的瀏覽器視窗中共享即使是同一個頁面；
   localStorage: 在所有同源視窗中都是共享的，也就是說只要瀏覽器不關閉，資料依然存在
   cookie：在所有同源視窗中都是共享的，也就是說只要瀏覽器不關閉，資料依然存在

除了上面說到的幾種方法之外還有一個瀏覽器中儲存結構化資料的一個方案那就是IndexedDB，IndexedDB是類似於MySQL或WebSQL Database的資料庫。與傳統資料庫最大的區別在於，IndexedDB使用物件儲存而不是表格儲存資料。IndexedDB的設計幾乎完全是非同步的，為此，大多數操作以請求的形式執行，這些請求會非同步執行，產生成功的結果或錯誤。絕大多數IndexedDB操作要求新增onerror和onsuccess事件處理程式來確定輸出。這裡只是簡單的做了解具體請檢視官方文件

本地儲存與vuex的區別

1. 實質的區別
   vuex存的是狀態，儲存在記憶體，webStorage是瀏覽器提供的介面，存的是檔案，以檔案的形式儲存在本地
2. 應用場景
   vuex用於元件之間的傳值，webStorage主要用於頁面之間的傳值
3. 永久性
   當重新整理頁面時，vuex儲存的值為丟失，webStorage不會