隨著對前端的了解越來越深入，了解到了很多種瀏覽器的儲存方案，如 cookie、localstorage等，哪這些儲存方案有何異同，分別的適用場景又是什麼呢。
cookie 被創造出來的本意並不是本地儲存，而是為了辨別使用者身份。眾所周知，http 協議是無狀態的，也就是說你每一次傳送給伺服器的請求對於伺服器來說都是孤立的，伺服器不知道這這些請求來自於誰。比如你向購物車裡面新增了一些商品，但是當傳送結賬請求的時候伺服器懵了，我怎麼知道你是誰，你買了什麼呢。而使用 cookie 之後，伺服器就可以通過檢視 cookie 來判斷傳送使用者，一定程度上 cookies 可以說是請求的身份證。可以告訴伺服器請求傳送自誰。
百聞不如一見，直接來看看 cookie 長啥樣
每個網域名稱只能設定與訪問到自己網域名稱下的 cookie，比如 baidu.com 無法訪問 domain 為 sougou.com 的 cookie。但是子網域名稱可以讀取父網域名稱設定的cookie，比如截圖中 www.baidu.com 就讀取到了 domain='.baidu.com' 的cookie，通過手動設定 domain 可以設定父網域名稱的 cookie，比如 www.baidu.com 可以設定domain='baidu.com'這樣 *.baidu.com 所有二級網域名稱也能讀取到它設定的 cookie
// 此時 所有二級網域名稱可以直接讀取到這個 cookie
cookie的生成方式分為 伺服器端生成和瀏覽器端生成。
我們可以通過響應頭里的 set-cookie 指定要儲存的 cookie 值。當請求返回瀏覽器的時候瀏覽器就會按照 header 中的 set-cookie 值設定 cookie。預設情況下，domain 被設定為設定 cookie 頁面的主機名，當然我們也可以手動設定 domain 的值。
既然 cookie 的作用就是告訴伺服器請求來自於誰，那麼最主要的作用就是保持使用者登陸態（記住密碼），除此之外還可以記錄使用者瀏覽資料，進行廣告推送和前文提到的購物車等。
缺點其實在前文中就很顯而易見了
cookie 會隨著每一次請求傳送，這就注定了 cookie 必定會有嚴格的大小限制，每乙個 cookie 的大小被限制在了 4kb，值得注意的是 4kb 指的是乙個 name-value 的大小，而並不是說這個網域名稱可以設定的 cookie 總大小只有 4kb
cookie 是跟隨著網域名稱的，會隨著每乙個同網域名稱請求傳送，但是其實很大一部分請求，比如說等靜態資源的請求是完全用不著 cookie 的，雖然每個cookie只有 4kb 但是積少成多也會帶來巨大的資源浪費。
正如上文直接開啟控制台就可以看到 cookie 一樣，cookie 雖然通過編碼進行了加密，但在 http 傳輸中是明文傳輸，指令碼也可以很輕鬆的獲取到 cookie，非常容易被破解。
在伺服器端設定 cookie 的時候附帶上 httponly 標記，這樣在瀏覽器端就無法使用 document.cookie 訪問到這個 cookie 了
set-cookie: id=a3fwa; httponly既然 cookie 有這麼多缺點，有沒有什麼一勞永逸的解決方法呢，那就是「專業的人做專業的事」。
使用者登入態和部分使用者資訊的儲存的工作交給 seesion ---即 cookie 只用來儲存乙個使用者唯一識別符號，真正資訊儲存在伺服器端，使用 cookie 作為 seesionid 去伺服器查詢資訊，這樣一來 cookie 的容量限制，安全問題都引刃而解了，因為此時 cookie 裡面就是一串無意義的隨機碼。
本地儲存得工作交由 html5 中新增本地儲存的解決方案「web storage」，它又分成兩類 ：localstorage和sessionstorage，接下來就介紹這兩兄弟。
localstorage 使用非常方便：
// 設定資料
localstorage.setitem("key","value");
//讀取資料
let valuelocal = localstorage.getitem("key");
sessionstorage 更適合用來儲存生命週期和它同步的會話級別的資訊。這些資訊只適用於當前會話，比如可以用來做表單資料的持久化，防止重新整理後表單資料丟失
作用域的不同
這三者都遵循協議，即同協議，同網域名稱，同埠下才能訪問和修改同乙份資料，唯一不同的就是 seesionstorage 還要求在同一視窗。
生命週期的不同
這就是幾種瀏覽器儲存方案，當然還有我們應該根據不同方案各自的特點決定什麼時候使用什麼方案，適合的才是最好的。總結一下本文的幾個重點
瀏覽器的儲存
cookie，localstorage，sessionstorage，indexdb 我們先來通過 學習下這幾種儲存方式的區別 特性cookie localstorage sessionstorage indexdb 資料生命週期 一般由伺服器生成，可以設定過期時間 除非被清理，否則一直存在 頁面關...
js 瀏覽器儲存
瀏覽器儲存 sessionstorage 可臨時儲存，關閉頁面標籤自動 不支援跨頁面互動，只能臨時儲存。cookie 相容性最好，大小有限制，且每次傳送請求，請求頭里會帶著 cookie 一起傳送。usedata 出現時間早於 sessionstorage，ie 專用。js資料型別 string n...
瀏覽器快取詳解
報文頭里的一些關鍵資訊 e xpires http1.0 中的標準，表明過期時間，注意此處的時間都是指的是伺服器的時間。cache control http1.1 中的標準，可以看成是 expires 的補充。使用的是相對時間的概念。cache control的屬性 max age 設定快取的最大的...