瀏覽器提供的幾種存儲

隨着移動網絡的發展與演化，咱們手機上如今除了有原生APP，還能跑WebApp，它即開即用，用完即走。一個優秀的WebApp甚至能夠擁有和原生App媲美的功能和體驗。WebApp優異的性能表現，有一部分緣由要歸功於瀏覽器存儲技術的提高。Cookie存儲數據的功能已經很難知足開發所需，逐漸被WebStorage和IndexedDB取代。

Cookie

什麼是Cookie

Cookie是指某些網站爲了辨別用戶身份而存儲在用戶本地終端上的數據（一般通過加密）。Cookie是由服務器生成，客戶端進行維護和存儲。經過Cookie，可讓服務器知道請求是來源自哪一個客戶端並對客戶端狀態進行維護。好比登陸後的刷新和跳轉，請求頭會攜帶登錄時候Response Header中的set-cookie屬性，Web服務器在接收請求的時候就能讀出Cookie中的值，根據Cookie中的值就能夠判斷和恢復一些用戶的信息狀態。

經過上面的描述咱們能夠知道，Cookie的本職工做並不是是本地存儲，而是狀態維持。由於HTTP協議是無狀態的，不會保存請求和響應之間的通訊狀態。這就意味着，服務器在這種無狀態交互下，不會知道用戶上一次作了什麼，也就阻礙了交互式Web應用程序的實現。Cookie就是爲了繞開HTTP的無狀態性而誕生的一種解決方案，服務器能夠經過設置和讀取Cookie中包含的用戶信息來維持用戶與服務器會話中的狀態。能夠把Cookie理解爲一個存儲在瀏覽器中的小體積的文本文件，在請求的時候將攜帶着用戶信息的Cookie附着在HTTP請求上，服務器就能夠獲取到客戶端的狀態。

Cookie的典型應用場景有自動登陸（記住密碼）、購物車功能、記錄用戶行爲（作商品/廣告推薦）等。

Cookie的原理與生成方式

舉個簡單的例子，在典型的網上購物場景中，用戶瀏覽了幾個頁面，買了一盒餅乾和兩瓶飲料，最後結帳的時候，因爲HTTP的無狀態性，服務器根本不能知道用戶到底買了什麼，或者說用戶和用戶購買的商品沒法對應上。而有了Cookie以後，當用戶成功登陸以後，服務器在返回成功登陸響應的時候就會給客戶端返回一個攜帶用戶信息的Cookie，客戶端會保存這個Cookie。當用戶選購了商品併發送請求，請求中就會帶上這個Cookie，而後服務器就能夠檢查Cookie並獲取Cookie中的用戶信息，讓用戶和購買的商品可以對應得上。

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

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

1.http response header中的set-cookie。

2.js中經過document.cookie讀寫cookie，能夠將cookie解析爲鍵值對的形式展現。

Cookie的缺陷

1.Cookie不夠大。Cookie的大小限制在4KB左右，對於複雜的存儲需求來講是不夠用的。當Cookie超過4KB的時候，它將會面臨被裁切的命運。這樣看來，Cookie只能用來存取少許的信息，甚至有些瀏覽器對一個站點的Cookie個數都有作限制。這裏要注意的是，這裏的4KB容量限制是對Cookie中name=value的value來講的，並非一個域名下全部的Cookie共享的。

2.過多的Cookie會帶來巨大的性能/資源浪費。Cookie是緊跟域名的，同一個域名下的全部請求都會攜帶Cookie。不少場景其實並不須要身份驗證，好比請求一張圖片或者CSS文件，這種時候攜帶Cookie也就形成了性能/資源的浪費。有個解決方案就是使用CDN做爲靜態資源文件的請求服務方式，由於CDN的域名與主站的域名是分開的，也就不會在請求中附帶Cookie了。

Cookie的安全性

雖然Cookie中有些屬性能夠適當維持安全性，可是其不安全性幾乎仍然是固有的。

爲了彌補Cookie的侷限性，WebStorage就產生了。WebStorage是HTML5中新增的本地存儲解決方案，包含了SessionStorage和LocalStorage兩類。有了WebStorage以後，Cookie就可以安心只做爲客戶端與服務器交互的通道（保持客戶端狀態）了，不用再操心存儲的事情。

LocalStorage

LocalStorage是WebStorage之一。

LocalStorage的特色

1.保存的數據長期存在，下一次訪問該網站的時候，網頁能夠直接讀取以前保存的數據。

2.存儲限制大小爲5MB左右。

3.僅在客戶端使用，不和服務端進行通訊。

4.接口封裝得較好。

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

LocalStorage存入/讀取數據

LocalStorage保存的數據是以鍵值對的形式存在的，也就是說，每一項數據都有一個鍵名和對應的值，且全部的數據都是以文本格式保存的。

存入數據使用setItem()方法。這個方法接受兩個參數，第一個是鍵名，第二個是保存的數據。

localStorage.setItem(key, value);

讀取數據使用getItem()方法。這個方法接受一個參數，就是鍵名。

localStorage.getItem(key);

來看一個完整的例子：

function testLocalStorage() {
    if (window.localStorage) {
        localStorage.setItem('name', 'yanggb');
        console.log(localStorage.getItem('name'));
    }
}

LocalStorage的使用場景

LocalStorage在存儲方面幾乎沒有什麼特別的限制，在理論上，一些Cookie沒法勝任的、存儲簡單鍵值對的存儲任務均可以交給LocalStorage來作。

考慮到LocalStorage的特色之一是持久，所以有時候咱們更傾向於用它來存儲一些內容穩定的資源。好比圖片內容豐富的電商網站可使用LocalStorage來存儲Base64格式的圖片字符串。

SessionStorage

SessionStorage保存的數據用於瀏覽器的一次會話，當會話結束（一般是該窗口關閉），數據就會被清空。SessionStorage特別的一點在於，即使是相同域名下的兩個頁面，只要它們不在同一個瀏覽器窗口中打開，那麼它們的SessionStorage內容便沒法共享，而LocalStorage在全部同源窗口中共享的，Cookie也是在全部同源窗口中共享的。除了保存期限的長短不一樣，SessionStorage的屬性和方法與LocalStorage徹底同樣。

SessionStorage的特色

1.會話級別的瀏覽器存儲。

2.存儲大小限制爲5MB左右。

3.僅在客戶端使用，不與服務端進行通訊。

4.接口封裝得較好。

基於上面的特色，SessionStorage能夠有效地對錶單信息進行緩存，好比刷新時表單的信息不會丟失。

SessionStorage的使用場景

SessionStorage更適合用來存儲生命週期和它同步的會話級別的信息，這些信息只適用於當前的會話。當你開啓新的會話時，它也須要相應的更新或釋放。好比微博就使用SessionStorage存儲單次會話的瀏覽足跡，它會存一個lasturl鍵去對應你上一次訪問的url地址。當你切換url的時候，這個鍵值就會更新；當你關閉頁面的時候，這個鍵就會被釋放。這樣的數據用SessionStorage來處理再合適不過了。

SessionStorage、LocalStorage和Cookie之間的區別

SessionStorage、LocalStorage和Cookie都是存儲在瀏覽器端，都遵循瀏覽器的同源策略，不一樣的地方在於它們的生命週期和做用域不一樣。

做用域的不一樣

LocalStorage只要在相同的協議、相同的主機名、相同的端口下，就能讀取/修改到同一份LocalStorage數據。而SessionStorage則比LocalStorage要更嚴苛一點，除了協議、主機名、端口外，還要求在同一窗口（也就是瀏覽器的標籤頁）下。

生命週期的不一樣

LocalStorage是持久化的本地存儲，存儲在其中的數據是永遠不會過時的，使其消失的惟一辦法是手動刪除；而SessionStorage是臨時性的本地存儲，是會話級別的存儲，當會話結束（頁面被關閉）時，存儲內容也會隨之被釋放。

Web Storage是一個從定義到使用都很是簡單的東西。它使用鍵值對的形式進行存儲，這種模式有點相似於對象，但是鍵值卻只能存儲字符串。若是想要獲得對象，還須要先對字符串進行一輪解析。所以Web Storage能夠看做是對Cookie的拓展，只能用於存儲少許的簡單數據。當遇到大規模的、結構複雜的數據時，就須要用到IndexedDB。

IndexedDB

IndexedDB是一種低級的API，使用索引來實現對其間存儲數據的高性能搜索，用於客戶端須要存儲大量結構化數據（包括文件和blobs）的場景。

IndexedDB能夠看做是一個運行在瀏覽器上的非關係型數據庫。既然是數據庫了，那就不是5M、10M這樣小打小鬧的級別了，理論上來講，IndexedDB是沒有存儲上限的，通常來講不會小於250M。另外，它不只能夠存儲字符串，還能夠存儲二進制數據。

IndexedDB的特色

1.鍵值對存儲。IndexedDB內部採用對象倉庫（Object Store）存放數據，全部類型的數據均可以直接存入，包括JavaScript對象。在對象倉庫中，數據以鍵值對的形式保存，每個數據記錄都有對應的主鍵，且主鍵是惟一的，不可重複，不然會拋出錯誤。

2.異步。IndexedDB在操做時不會鎖死瀏覽器（異步線程，不會掛起其餘線程），用戶依然能夠能夠進行其餘操做。這與LocalStorage造成對比，後者的操做是同步的（會掛起其餘線程）。異步設計是爲了防止讀寫大量數據的時候拖慢網頁的表現性能。

3.支持事務。IndexedDB是支持事務（Transaction）的，也一樣支持事務的ACID特性。這意味着在一系列的操做步驟中，只要有一步失敗，整個事務就會取消，數據庫將回滾到事務發生以前的狀態，不存在只改寫一部分數據的狀況，保證數據的完整性和一致性。

4.同源限制。IndexedDB受瀏覽器同源策略的限制，每個數據庫都嚴格對應建立它的域名。網頁只能訪問自身域名下面的數據庫，而不能訪問跨域的數據庫。

5.存儲空間大。IndexedDB的存儲空間比LocalStorage大得多，通常來講不小於250MB，甚至沒有上限。

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

IndexedDB的建立、關閉和刪除操做

在IndexedDB的大部分操做並非咱們經常使用的調用方法（返回結果的模式），而是請求-響應的模式。

1.創建打開IndexedDB。

window.indexedDB.open("testdb");

上面這條語句並不會返回一個DB對象的句柄，咱們獲得的是一個IDBOpenDBRequest對象，在這個對象中的result屬性中會包含咱們想要的DB對象。

除了result以外，IDBOpenDBRequest接口還定義了幾個重要的屬性。

屬性	值
onerror	請求失敗的回調函數句柄
onsuccess	請求成功的回調函數句柄
onupgradeneeded	請求數據庫版本變化句柄

來看一個完整的例子：

// 全局myDB對象
var myDB = {
    name: 'testdb',
    db: null
}

// 定義建立打開indexedDB的函數
function openDB (dbName) {
    var request = window.indexedDB.open(dbName);
    // 建立打開失敗事件
    request.onerror = function(e) {
        console.log('open indexdb error');
    }
    // 建立打開成功事件
    request.onsuccess = function(e) {
        myDB.db = e.target.result;
        console.log(myDB.db);
    }
}

// 調用建立打開函數
openDB(myDB.name);

2.關閉IndexedDB。

// 定義關閉IndexedDB函數
function closeDB() {
    myDB.db.close();
}

這裏要注意調用close()方法的是IndexedDB對象，且關閉並不會刪除瀏覽器中的IndexedDB數據庫。

3.刪除IndexedDB。

// 定義刪除IndexedDB的函數
function deleteDB() {
    window.indexedDB.deleteDatabase(myDB.name);
}

要特別說起的是，IndexedDB的命名是嚴格區分大小寫的，不管是建立仍是刪除都要注意這一點。

關於IndexedDB的使用，內容比較多，另外開篇去深刻了解。

Cookie、WebStorage和IndexedDB之間的區別

從上表中能夠看出，Cookie已經不建議用於存儲用途。若是沒有大量數據存儲需求的話，可使用LocalStorage和SessionStorage。對於不怎麼改變的數據儘可能使用LocalStorage作存儲，不然能夠用SessionStorage作存儲。

瀏覽器存儲的總結

由於瀏覽器存儲和緩存技術的出現和發展，前端應用帶來了無限的可能。近年來，基於存儲、緩存技術的第三方庫層出不窮，此外還衍生出了PWA這樣優秀的Web應用模型。

1.Cookie的本質工做並非本地存儲，而是狀態維持。

2.WebStorage是HTML5專門爲瀏覽器存儲而提供的數據存儲機制，不與服務端發生通訊。

3.IndexedDB用於客戶端存儲大量結構化的數據。

 

"你一邊討厭着你如今的生活狀態，一邊懶散地混過每一天。"