瀏覽器儲存（cookie、localStorage、sessionStorage和IndexDB）

前言

前兩天課堂上，老師在瀏覽器界面講的正起勁的時候，忽然定了一下，而後不出聲了，默默的打開調試面板，選到Application,指着storage用鼠標在上面畫起了圈，而後詭異的的笑起來了，邊笑邊"和善可親"的問着咱們：有誰知道storage下面的cookie、localStorage、sessionStorage和IndexDB的做用和區別嗎？

而後全場靜默了兩分鐘，老師沒辦法，簡單的介紹了一下，說道這個得記住，大廠面試考的很是多。而後我就很懵逼的功能沒記住，就只記住了「大廠考」，因而思考了兩天仍是決定寫一下這篇文章夯實一下本身的知識。

正片開始

前端的儲存方式

存儲類：

• Web存儲 （Web Storage）：HTML 5 中提出的存儲方式，容量有 5 M。

   localStorage
   sessionStorage

• Cookie：瀏覽器廣泛支持的基於 HTTP 協議的存儲方式，但容量只有 4 KB

• 數據庫存儲： IndexDB Web SQL

緩存類：

• Cache Storage: 在 Service Worker 的規範中提出，通常配合 Service Worker 進行離線緩存。
• Application Cache： 在 HTML5.1提出的緩存方式，可用來構建離線應用。

cookie的一些小祕密

Cookie基於HTTP規範，用來識別用戶。 互聯網早期瀏覽器是沒有狀態維護，這個就致使一個問題就是服務器不知道瀏覽器的狀態，沒法判斷是不是同一個瀏覽器。這樣用戶登陸、購物車功能都沒法實現，Lou Montulli在1994年引入到web中最終歸入W3C規範 RFC6265中。

瀏覽器在本地按照必定規則存儲一些文本字符串，每當瀏覽器像服務器發送請求時帶這些字符串。服務器根據>字符串斷定瀏覽器的狀態好比：登陸、訂單、皮膚。服務器就能夠根據不一樣的cookie識別出不一樣的用戶信 息。。

Cookie 的構成：

• 名稱（Name）
• 值（Value）
• 域（Domain）
• 路徑（Path）
• 失效時間 （Expiers/Max-Age）
• 大小（Size）
• 是否爲 HTTP請求（HttpOnly）
• 安全性（Secure）

提示：域、路徑、失效時間和安全性都是服務器給瀏覽器的指示，它們不會隨着請求發送給服務器，發送給服務器的只有名稱與值對。

Cookie 的限制性：

• 若是設定了 Cookie 的過時時間，那麼 Cookie 會在到期時自動失效。
• 若是沒有設定過時時間，那麼 Cookie 就是 session 級別的，即瀏覽器關閉時 Cookie 自動消失。

Cookie 的優缺點：

優勢：

1. 能夠控制過時時間，不會永久有效，有必定的安全保障。
2. 可進行擴展，可跨域共享。
3. 經過加密與安全傳輸技術 （SSL） ，能夠減小 Cookie 被破解的可能性。
4. 有較高的兼容性。

缺點：

1. 有必定的數量與長度限制，每一個 Cookie 長度不能超過 4 KB ，不然超出部分會被截掉。
2. 請求頭上的數據容易被攔截攻擊。

cookie是如何產生的：

1. 在瀏覽器訪問服務器時由服務器返回一個Set-Cookie響應頭，當瀏覽器解析這個響應頭時設置cookie

2. 經過瀏覽器js腳本設置document.cookie = 'name=monsterooo';

瀏覽器訪問服務器攜帶cookie過程

建立cookie

/**

* 'name', cookie命名

* 'value'，cookie的值

* {

* 　　expires: 7, // cookie有效期，單位天；默認值：會話cookie，關閉瀏覽器cookie失效。

* 　　path: '/', // cookie影響到的路徑；值爲'/'，表示設置cookie在整個域中可用；默認值：建立cookie的頁面路徑。

* 　　domain: 'example.com', // 定義cookie有效的域。默認值：建立cookie的頁面域。

* 　　secure: false, // 定義cookie安全性，默認值：false，設置爲true，則cookie在http中是無效的，cookie的傳輸須要使用安全協議（https）。

* }

*/

$.cookie('name', 'value', { expires: 7, path: '/', domain: 'example.com', secure: false});
複製代碼

讀取cookie

$.cookie('name'); //name存在返回對應value,不存在返回null
複製代碼

刪除cookie

//成功刪除cookie時返回true，不然返回false

$.removeCookie('name'); // => true

$.removeCookie('nothing'); // => false


注意：刪除cookie時，必須傳遞用於設置cookie的徹底相同的路徑，域和安全選項，除非您依賴於默認選項。

即：設置cookie時若是設置了path屬性或secure屬性，刪除的時候要帶着這些屬性，不然沒法成功刪除cookie。

// This won't work!

$.removeCookie('name'); // => false

// This will work!

$.removeCookie('name', { path: '/' }); // => true

複製代碼

Web Storage（localStorage和sessionStorage）

出現緣由：

• 克服 Cookie 的一些限制，同時存儲一些須要嚴格控制在客戶端，不須要發送給服務器的一些數據。
• 提供了除 Cookie 以外的另外一種存儲會話的途徑。
• 提供了一種大容量存儲空間來跨回話存儲數據的途徑。

它們都是直接做爲 window對象的屬性存在的，咱們能夠直接經過 window.localStorage 與 window.sessionStorage 來訪問。

注： Web Storage 只能儲存字符串，若是用 Web Storage 存儲對象，會出現 [Object Object], 能夠用 JSON.stringify 與 JSON.parse方法來解決這個問題。

Web Storage 實例方法:

• clear：刪除全部值
• getItem(name): 根據傳入的鍵來獲取對應的值。
• key(index): 得到所對應索引的鍵，名稱。
• removeItem(name): 刪除鍵對應的鍵值對
• setItem(name, value): 爲指定的 name 設置一個對應的值。

sessionStorage:

• 同源策略： 不一樣於 Cookie， sessionStorage 訪問限制更高，只有當前設定了 sessionStorage 的域下才能訪問。
• 單標籤頁： 兩個相同域下的標籤頁不能互通。
• 在關閉標籤頁或者新開的標籤頁下都不能訪問以前寫下的 sessionStorage, 刷新標籤頁依然能夠訪問 sessionStorage。

使用場景：

1. 主要針對會話級的小數據的存儲。
2. 存儲一些在當前頁面刷新仍然須要存儲，可是關閉後不須要留下的信息。
3. 很適合單頁應用的使用，能夠用來存儲登陸態信息等。

localStorage：

• 同源策略：和 sessionStorage 同樣，要訪問同一個 localStorage 頁面必須來自同一個域名，同種協議，同種端口。
• localStorage 設定後，刷新或者從新打開標籤頁，關閉瀏覽器從新打開原來的標籤頁也能夠訪問到。

使用的場景：

1. 持久性的保存客戶端數據，只能經過 JavaScript 刪除或者用戶清除瀏覽器緩存。
2. 若是有一些稍大量的數據，例如編輯器的自動保存等。
3. 多頁面間訪問共同數據。 sessionStorage 只能用於一個標籤頁，而localStorage能夠在多個標籤頁之間共享。

sessionStorage 與 localStorage 的區別:

• 生命週期：localStorage 是本地存儲，沒有期限，只能用戶本身操做來刪除。 sessionStroage 是會話存儲，頁面關閉數據就會丟失。
• sessionStorage 有單標籤頁的限制，localStorage則沒有。

Storage 事件：

咱們對 Storage 對象進行任何的操做，都會在文檔上觸發 Storage 事件， 這個事件的 event 對象有如下屬性：

• domain：發生變化的存儲空間的域名。
• key：設置或刪除的鍵名
• newValue： 若是是設置值，則是新值。若是是刪除鍵，則爲null。
• oldValue：鍵被更改以前的值。

IndexDB 與 Web SQL

特色：

• 訪問：indexDB 和 Web SQL 和 Web Storage 同樣，均是隻能在建立數據庫的域名下才能訪問。
• 存儲時間：存儲時間爲永久，除非用戶清除數據，他可用做長期的存儲。
• 大小限制：兩者其實沒有強制限制。只是 indexDB 在數據超過 50 M 以後會從瀏覽器彈出一個框讓你確認。
• 性能： indexDB 查詢速度會相對較慢，而 Web SQL 的性能相對較快。

IndexDB 特色：

• 它的數據保存在對象存儲空間中。
• 建立對象存儲空間，首先先定義一個鍵，以後添加數據。
• 可使用遊標查詢。

Cache Storage和Application Cache

Cache Storage：

Cache Storage 是用來存儲 Response 對象 ，也就是對 HTTP 響應進行緩存。 Cache Storage 是多個 cache 的集合，每一個 cache 能夠存儲多個響應對象。它基於 Promise。

Application Cache：

它是 HTML5 中新引入的應用程序換粗技術，它的出現意味着 web 應用能夠經過緩存，在沒有網絡的環境下運行，構建離線應用。

優勢:

• 離線瀏覽
• 提高頁面的載入速度
• 下降服務器的壓力

轉載：blog.csdn.net/weixin_4401…