深刻理解瀏覽器存儲

前言

隨着Web應用程序出現以來，人們對與可以直接在客戶端上存儲信息能力的要求始終沒有中止過。應用開發人員在找各類方式將數據存儲在客戶端上。從剛開始的Cookie存儲方案，到如今的Web Storage和indexedDB，本文將主要介紹這三種瀏覽器存儲方式優缺點。

Cookie

一、Cookie是什麼？

HTTP Cookie，一般直接叫作cookie，起初是在客戶端用於存儲會話信息的。該標準要求服務器對 任意 HTTP請求發送 Set-Cookie 而HTTP頭做爲響應的一部分，其中包含會話信息。例如，這種服務器響 應的頭可能以下：

HTTP/1.1 200 OK 
Content-type: text/html 
Set-Cookie: name=value 
Other-header: other-header-value

這個 HTTP響應設置以name爲名稱、以value爲值的一個cookie，名稱和值在傳送時都必須是 URL 編碼的。瀏覽器會存儲這樣的會話信息，並在這以後，經過爲每一個請求添加 Cookie ,HTTP 頭將信 息發送回服務器，以下所示：

GET /index.html HTTP/1.1 
Cookie: name=value 
Other-header: other-header-value

發送回服務器的額外信息能夠用於惟一驗證客戶來自於發送的哪一個請求。

二、Cookie主要構成：

• name（名稱）：一個惟一肯定cookie的名稱。cookie的名稱必須是通過 URL編碼的。
• value（值）：儲存在 cookie中的字符串值。值必須被 URL編碼。
• Domain（域）：cookie 對於哪一個域是有效的。全部向該域發送的請求中都會包含這個 cookie 信息。
• path（路徑）：對於指定域中的那個路徑，應該向服務器發送 cookie。
• Expires/Max-Age（失效時間）：表示 cookie 什麼時候應該被刪除的時間戳（也就是，什麼時候應該中止向服務器發送這個 cookie）。
• HttpOnly：這個屬性是面試的時候常考的，若是這個屬性設置爲true，就不能經過js腳原本獲取cookie的值，能有效的防止xss攻擊。
• Secure（安全標誌）：指定後，cookie 只有在使用 SSL 鏈接的時候才發送到服務器。

### 三、Cookie的原理

第一次訪問網站的時候，瀏覽器發出請求，服務器響應請求後，會在響應頭裏面添加一個Set-Cookie，將cookie放入到響應請求中，在瀏覽器第二次發請求的時候，會經過Cookie請求頭部將Cookie信息發送給服務器，服務端會辨別用戶身份，另外，Cookie的過時時間、域、路徑、有效期、適用站點均可以根據須要來指定。

四、Cookie生成方式

Cookie的生成方式主要有兩種：

1. 服務端設置 cookie

客戶端第一次向服務端請求時，在相應的請求頭中就有set-cookie字段，用來標識是哪一個用戶。

下圖爲登陸騰訊雲服務端響應頭截圖，cookie設置了相關的屬性：expires、path等。response headers服務端能夠設置cookie 的全部選項：expires、domain、path、secure、HttpOnly。

1. 客戶端設置 cookie

cookie不像web Storage有setItem，getItem，removeItem，clear等方法，須要本身封裝。簡單地在瀏覽器的控制檯裏輸入:

document.cookie="name=lynnshen; age=18"

最簡單的設置多個cookie的方法就是重複執行document.cookie = "key=name"

document.cookie = "name=lynnshen";
document.cookie = "age=18";

再看控制檯：

五、Cookie設置、讀取、刪除方法的簡單封裝

1. 設置cookie

function setCookie(name, value, expires, path, domain, secure) {
    var cookieText = encodeURIComponent(name) + "=" +
    encodeURIComponent(value); 
    if (expires instanceof Date) {             
        cookieText += "; expires=" + expires.toGMTString();         
    } 
    if (path) {             
        cookieText += "; path=" + path;         
    } 
    if (domain) {            
        cookieText += "; domain=" + domain;        
    } 
    if (secure) {          
     cookieText += "; secure";      
    } 
    document.cookie = cookieText; 
}

1. 刪除cookie

function removeCookie(name, path, domain, secure){         
    this.set(name, "", new Date(0), path, domain, secure);    
 }

1. 讀取cookie

function getCookie(name){
    var cookieName = encodeURIComponent(name) + "=";         
    var cookieStart = document.cookie.indexOf(cookieName);
    var cookieValue = null; 
    if (cookieStart > -1){            
        var cookieEnd = document.cookie.indexOf(";", cookieStart);      
        if (cookieEnd == -1){                 
            cookieEnd = document.cookie.length;            
        }             
        cookieValue = decodeURIComponent(document.cookie.substring(
        cookieStart + cookieName.length, cookieEnd));     
    } 
    return cookieValue;     
 }

六、Cookie的缺點

1. 每一個特定域名下的cookie數量有限：

   • IE6或IE6-(IE6如下版本)：最多20個cookie
   • IE7或IE7+(IE7以上版本)：最多50個cookie
   • FF:最多50個cookie
   • Opera:最多30個cookie
   • Chrome和safari沒有硬性限制

當超過單個域名限制以後，再設置cookie，瀏覽器就會清除之前設置的cookie。IE和Opera會清理近期最少使用的cookie，FF會隨機清理cookie。

1. 存儲量過小，只有4KB。
2. 每次HTTP請求都會發送到服務端，影響獲取資源的效率。
3. 須要本身封裝獲取、設置、刪除cookie的方法。

Web Storage

最初的Web Storage 規範包含了兩種對象的定義:sessionStorage和globalStorage。這兩個對象在支持的瀏覽器中都是以windows對象屬性的形式存在的。而localStorage對象在修訂過的HTML 5規範中做爲持久保存客戶端數據的方案取代了
globalStorage。因此如今主要談論的是sessionStorage和localStorage兩種。

一、web Storage的主要做用：

• 提供一種在 cookie 以外存儲會話數據的途徑;
• 提供一種存儲大量能夠跨會話存在的數據的機制。

二、web Storage 的主要方法：

• clear(): 刪除全部值;Firefox 中沒有實現 。
• getItem(name):根據指定的名字 name獲取對應的值。
• key(index):得到 index 位置處的值的名字。
• removeItem(name):刪除由 name 指定的名值對兒。

注意： Storage 類型只能存儲字符串。非字符串的數據在存儲以前會被轉換成字符串。

localStorage

一、localStorage的特色

• 保存的數據長期存在，下一次訪問該網站的時候，網頁能夠直接讀取之前保存的數據。
• 大小爲5M左右
• 僅在客戶端使用，不和服務端進行通訊
• 接口封裝較好

基於上面的特色，LocalStorage能夠做爲瀏覽器本地緩存方案，用來提高網頁首屏渲染速度(根據第一請求返回時，將一些不變信息直接存儲在本地)。

二、localStorage的使用

//使用方法存儲數據 
localStorage.setItem("name", "Nicholas");

//使用屬性存儲數據
localStorage.book = "Professional JavaScript";

//使用方法讀取數據
var name = localStorage.getItem("name");

//使用屬性讀取數據
var book = localStorage.book;

數據的保留是經過 JavaScript 刪除或者是用戶清除瀏覽器緩存。

sessionStorage

一、什麼是 sessionStorage ？

• sessionStorage 對象存儲特定於某個會話的數據，也就是該數據只保持到瀏覽器關閉。
• sessionStorage就像會話 cookie，也會在瀏覽器關閉後消失。
• 存儲在 sessionStorage中的數據能夠跨越頁面刷新而存在，同時若是瀏覽器支持，瀏覽器崩潰並重啓以後依然可用(Firefox 和 WebKit都支持，IE則不行)。
• seesionStorage對象綁定於某個服務器會話，因此當文件在本地運行的時候是不可用的。
• 存儲在sessionStorage中的數據只能由最初給對象存儲數據的頁面訪問到，因此對多頁面應用有限制。

二、sessionStorage的特色：

• 會話級別的瀏覽器存儲
• 大小爲5M左右
• 僅在客戶端使用，不和服務端進行通訊
• 接口封裝較好

基於上面的特色，sessionStorage能夠有效對錶單信息進行維護，好比刷新時，表單信息不丟失。

三、localStorage 的使用

//使用方法存儲數據 
sessionStorage.setItem("name", "Nicholas");

//使用屬性存儲數據
sessionStorage.book = "Professional JavaScript";

//使用方法讀取數據
var name = sessionStorage.getItem("name");

//使用屬性讀取數據
var book = sessionStorage.book;

sessionStorage 對象應該主要用於僅針對會話的小段數據的存儲。若是須要跨越會話存儲數據， 那麼localStorage更爲合適。

IndexedDB

一、IndexedDB 是什麼？

Indexed Database API，或者簡稱爲IndexedDB，是在瀏覽器中保存結構化數據的一種數據庫。IndexedDB 的思想是建立一套 API，方便保存和讀取 JavaScript 對象，同時還支持查詢及搜索。

二、IndexedDB 的特色

• 鍵值對儲存：IndexedDB 內部採用對象倉庫（object store）存放數據。全部類型的數據均可以直接存入，包括JavaScript對象。對象倉庫中，數據以"鍵值對"的形式保存，每個數據記錄都有對應的主鍵，主鍵是獨一無二的，不能有重複，不然會拋出一個錯誤。
• 異步:IndexedDB 操做時不會鎖死瀏覽器，用戶依然能夠進行其餘操做，這與 LocalStorage 造成對比，後者的操做是同步的。異步設計是爲了防止大量數據的讀寫，拖慢網頁的表現。
• 支持事務: IndexedDB支持事務（transaction），這意味着一系列操做步驟之中，只要有一步失敗，整個事務就都取消，數據庫回滾到事務發生以前的狀態，不存在只改寫一部分數據的狀況。
• 同源限制: IndexedDB受到同源限制，每個數據庫對應建立它的域名。網頁只能訪問自身域名下的數據庫，而不能訪問跨域的數據庫。
• 儲存空間大: IndexedDB 的儲存空間比 localStorage大得多，通常來講很多於 250MB，甚至沒有上限。

-支持二進制儲存: IndexedDB不只能夠儲存字符串，還能夠儲存二進制數據（ArrayBuffer 對象和 Blob 對象）。

三、IndexedDB 基本指令

1. 創建打開IndexedDB : window.indexedDB.open("testDB")
2. 關閉IndexedDB: indexdb.close()
3. 刪除IndexedDB: window.indexedDB.deleteDatabase(indexdb)

四、webStorage、cookie 和 IndexedDB之間的區別

從上圖能夠看到，cookie已經不建議用於存儲。若是沒有大量數據存儲需求的話，可使用 localStorage 和 sessionStorage 。對於不怎麼改變的數據儘可能使用 localStorage 存儲，不然能夠用 sessionStorage 存儲。

總結

web存儲能夠說是必需要重點理解和掌握的知識點了，特別是web Storage常常會使用到。最後總結用一句話總結三種存儲方案。

• Cookie 的本職工做並不是本地存儲，而是「維持狀態」。
• Web Storage 是 HTML5專門爲瀏覽器存儲而提供的數據存儲機制，不與服務端發生通訊。
• IndexedDB 用於客戶端存儲大量結構化數據。