靈魂拷問第2篇：能不能說一說瀏覽器的本地存儲？各自優劣如何？

瀏覽器的本地存儲主要分爲Cookie、WebStorage和IndexedDB, 其中WebStorage又能夠分爲localStorage和sessionStorage。接下來咱們就來一一分析這些本地存儲方案。

Cookie

Cookie 最開始被設計出來其實並非來作本地存儲的，而是爲了彌補HTTP在狀態管理上的不足。

HTTP 協議是一個無狀態協議，客戶端向服務器發請求，服務器返回響應，故事就這樣結束了，可是下次發請求如何讓服務端知道客戶端是誰呢？

這種背景下，就產生了 Cookie.

Cookie 本質上就是瀏覽器裏面存儲的一個很小的文本文件，內部以鍵值對的方式來存儲(在chrome開發者面板的Application這一欄能夠看到)。向同一個域名下發送請求，都會攜帶相同的 Cookie，服務器拿到 Cookie 進行解析，便能拿到客戶端的狀態。

Cookie 的做用很好理解，就是用來作狀態存儲的，但它也是有諸多致命的缺陷的：

1. 容量缺陷。Cookie 的體積上限只有4KB，只能用來存儲少許的信息。

2. 性能缺陷。Cookie 緊跟域名，無論域名下面的某一個地址需不須要這個 Cookie ，請求都會攜帶上完整的 Cookie，這樣隨着請求數的增多，其實會形成巨大的性能浪費的，由於請求攜帶了不少沒必要要的內容。

3. 安全缺陷。因爲 Cookie 以純文本的形式在瀏覽器和服務器中傳遞，很容易被非法用戶截獲，而後進行一系列的篡改，在 Cookie 的有效期內從新發送給服務器，這是至關危險的。另外，在HttpOnly爲 false 的狀況下，Cookie 信息能直接經過 JS 腳原本讀取。

localStorage

和Cookie異同

localStorage有一點跟Cookie同樣，就是針對一個域名，即在同一個域名下，會存儲相同的一段localStorage。

不過它相對Cookie仍是有至關多的區別的:

1. 容量。localStorage 的容量上限爲5M，相比於Cookie的 4K 大大增長。固然這個 5M 是針對一個域名的，所以對於一個域名是持久存儲的。

2. 只存在客戶端，默認不參與與服務端的通訊。這樣就很好地避免了 Cookie 帶來的性能問題和安全問題。

3. 接口封裝。經過localStorage暴露在全局，並經過它的 setItem 和 getItem等方法進行操做，很是方便。

操做方式

接下來咱們來具體看看如何來操做localStorage。

let obj = { name: "sanyuan", age: 18 }; localStorage.setItem("name", "sanyuan"); localStorage.setItem("info", JSON.stringify(obj)); 複製代碼

接着進入相同的域名時就能拿到相應的值:

let name = localStorage.getItem("name"); let info = JSON.parse(localStorage.getItem("info")); 複製代碼

從這裏能夠看出，localStorage其實存儲的都是字符串，若是是存儲對象須要調用JSON的stringify方法，而且用JSON.parse來解析成對象。

應用場景

利用localStorage的較大容量和持久特性，能夠利用localStorage存儲一些內容穩定的資源，好比官網的logo，存儲Base64格式的圖片資源，所以利用localStorage

sessionStorage

特色

sessionStorage如下方面和localStorage一致:

• 容量。容量上限也爲 5M。
• 只存在客戶端，默認不參與與服務端的通訊。
• 接口封裝。除了sessionStorage名字有所變化，存儲方式、操做方式均和localStorage同樣。

但sessionStorage和localStorage有一個本質的區別，那就是前者只是會話級別的存儲，並非持久化存儲。會話結束，也就是頁面關閉，這部分sessionStorage就不復存在了。

應用場景

1. 能夠用它對錶單信息進行維護，將表單信息存儲在裏面，能夠保證頁面即便刷新也不會讓以前的表單信息丟失。
2. 能夠用它存儲本次瀏覽記錄。若是關閉頁面後不須要這些記錄，用sessionStorage就再合適不過了。事實上微博就採起了這樣的存儲方式。

IndexedDB

IndexedDB是運行在瀏覽器中的非關係型數據庫, 本質上是數據庫，毫不是和剛纔WebStorage的 5M 一個量級，理論上這個容量是沒有上限的。

關於它的使用，本文側重原理，並且 MDN 上的教程文檔已經很是詳盡，這裏就不作贅述了，感興趣能夠看一下使用文檔。

接着咱們來分析一下IndexedDB的一些重要特性，除了擁有數據庫自己的特性，好比支持事務，存儲二進制數據，還有這樣一些特性須要格外注意：

1. 鍵值對存儲。內部採用對象倉庫存放數據，在這個對象倉庫中數據採用鍵值對的方式來存儲。
2. 異步操做。數據庫的讀寫屬於 I/O 操做, 瀏覽器中對異步 I/O 提供了支持。
3. 受同源策略限制，即沒法訪問跨域的數據庫。

總結

瀏覽器中各類本地存儲和緩存技術的發展，給前端應用帶來了大量的機會，PWA 也正是依託了這些優秀的存儲方案才得以發展起來。從新梳理一下這些本地存儲方案:

1. cookie並不適合存儲，並且存在很是多的缺陷。
2. Web Storage包括localStorage和sessionStorage, 默認不會參與和服務器的通訊。
3. IndexedDB爲運行在瀏覽器上的非關係型數據庫，爲大型數據的存儲提供了接口。