參考文章：https://segmentfault.com/a/1190000004556040

                  https://segmentfault.com/a/1190000012057010#articleHeader0

webStorage是本地儲存，儲存在客戶端，包括localStorage和sessionStorage。

localStorage

localStorage生命週期是永久，這意味著除非使用者顯示在瀏覽器提供的UI上清除localStorage資訊，否則這些資訊將永遠存在。存放資料大小一般為5MB，僅在客戶端（即瀏覽器）中儲存，不參與和伺服器的通訊。

sessionStorage

sessionStorage僅在當前會話下有效，關閉頁面或瀏覽器後被清除。存放資料大小為一般5MB，僅在客戶端（即瀏覽器）中儲存，不參與和伺服器的通訊。原生介面可以接受，亦可再次封裝來對Object和Array有更好的支援。

localStorage和sessionStorage用法

localStorage和sessionStorage用法相同：

localStorage.setItem('key', 'value')

localStorage.getItem('key')

localStorage.removeItem('key')

localStorage.clear()
 

localStorage和sessionStorage使用場景

localStorage：

1. 表單頁返回後將填寫資訊存為草稿，下一次進入是選擇是否載入草稿
2. 搜尋條件存為搜尋歷史
3. 相同瀏覽器的不同頁面間傳值

sessionStorage：

1. 統計當前頁面元素的點選次數
2. 單頁面應用路由之間傳值

localStorage和sessionStorage作用域不同

不同瀏覽器無法共享localStorage或sessionStorage中的資訊。相同瀏覽器的不同頁面間可以共享相同的localStorage（頁面屬於相同域名和埠），但是不同頁面或標籤頁間無法共享sessionStorage的資訊。這裡需要注意的是，頁面及標籤頁僅指頂級視窗，如果一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是可以共享sessionStorage的。

cookie

生命期為只在設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉。存放資料大小為4k左右。有個數限制（各瀏覽器不同），一般不能超過20個。與伺服器端通訊：每次都會攜帶在HTTP頭中，如果使用cookie儲存過多資料會帶來效能問題。

儲存cookie是瀏覽器提供的功能。cookie其實是儲存在瀏覽器中的純文字，瀏覽器的安裝目錄下會專門有一個cookie資料夾來存放各個域下設定的cookie。

當網頁要發http請求時，瀏覽器會先檢查是否有相應的cookie，有則自動新增在request header中的cookie欄位中。這些是瀏覽器自動幫我們做的，而且每一次htpp請求瀏覽器都會自動幫我們做。

客戶端設定cookie

document.cookie="age=12; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=sankuai.com; path=/"

修改cookie

要想修改一個cookie，只需要重新賦值就行，舊的值會被新的值覆蓋。但要注意，在設定新cookie時，path/domain這幾個選項一定要和舊cookie保持一致。否則不會修改舊值。

刪除cookie

刪除一個cookie也挺簡單，也是重新賦值，只要將這個新的cookie的exprise選項設定為一個過去的時間點就行了。同樣要注意，path/domain這幾個選項一定要和舊cookie保持一致。

cookie使用場景

儲存在cookie中的資料，每次都被瀏覽器自動放在http請求中，如果這些資料並不是每個請求都需要發給服務端的資料，就會增加網路開銷。對於設定 “每次請求都要攜帶的資訊（例如身份認證資訊）” 就特別適合放在cookie中。