localStorage、sessionStorage、IndexedDB、Cookies瀏覽器數據存儲方案一覽

1、localStorage

　　localStorage是一種在客戶端瀏覽器本地化存儲的機制，屬性爲只讀，是絕大多數瀏覽器原生支持的屬性，容許在瀏覽器中存儲鍵值對數據。

　　（1）localStorage的使用

if(window.localStorage) { // 保存數據 localStorage.setItem("score", 100) // 讀取數據 let score = localStorage.getItem("score") console.log("score") // 刪除數據 localStorage.removeItem("score") // 刪除全部保存的數據  localStorage.clear() } else { console.log("瀏覽器不支持localStorage") }

 

打印出來的結果：

　　注意此時打印出的數據爲string類型，這是由於localStorage只支持string類型的儲存，它將存進去的int型數據轉換成了string類型。

　　（2）localStorage的優點

　　localStorage僅在本地保存數據，不會將自動數據發送給服務器，所以可適當節省網絡流量。localStorage的儲存容量在2. 5MB到10MB之間，遠超過cookie的最大儲存容量4KB，localStorage可以持久化儲存，即便窗口或者瀏覽器關閉也能一直保存數據，除非主動清除其中的數據。localStorage的數據在全部同源窗口中都是共享的，即在同一個域名同一個端口和同一種協議下能夠實現數據的共享。localStorage由瀏覽器原生支持，具備容量大和容易使用的特色。

　　（3）localStorage的缺陷

　　localStorage本質上是對字符串的讀取，若是儲存內容過多會消耗內存空間而致使頁面變卡。而因爲其儲存的數據持久有效且容易讀取，因此它的安全性也比較差，不適宜用來保存用戶敏感信息。

2、sessionStorage

　　同localStorage同樣，sessionStorage也是一種在客戶端瀏覽器本地化儲存的機制，也能在瀏覽器中儲存鍵值對數據，主要的區別就是sessionStorage中的數據是臨時保存的，用於本地儲存一個回會話（session）中的數據，這些數據只有在同一個會話中的頁面中才能訪問，會話結束以後便隨之銷燬。

　　（1）sessionStorage的使用

　　　sessionStorage與localStorage的主要區別是儲存數據生命週期的問題，所以調用語法也是相同的。

if(window.sessionStorage) { // 保存數據 sessionStorage.setItem("score", 100) // 讀取數據 let score = sessionStorage.getItem("score") console.log("score") // 刪除數據 sessionStorage.removeItem("score") // 刪除全部保存的數據  sessionStorage.clear() } else { console.log("瀏覽器不支持sessionStorage") }

　　（2）sessionStorage的優缺陷

　　sessionStorage做爲一種會話級別的儲存，僅在當前會話週期內有效，所以適合做爲會話週期內事件及頁面全局通訊的臨時性使用的數據儲存方式，不可以儲存長期使用的靜態資源數據。

3、IndexedDB

　　前面提到的兩種數據儲存方式，它們的儲存量都在10MB之內，雖然遠遠大於cookie的4KB儲存空間，可是任然不適合做爲客戶端大量儲存數據的方式。所以，適用於客戶端儲存大容量數據的瀏覽器數據庫IndexedDB應運而生。簡單地說，IndexedDB做爲一種本地數據庫，具備如下幾個特色：

　　1、異步操做。與前面提到的兩種數據儲存方式不一樣，IndexedDB支持數據讀寫時的異步操做，而不是同步語句。localStorage和sessionStorage主要應用於少許數據的讀取，所以進行同步操做對用戶的延遲感覺不那麼明顯，可是IndexedDB一般涉及大量數據的讀寫操做，而同步的設計會拖慢網頁，鎖死瀏覽器，形成卡頓，而異步設計使得用戶能夠進行其餘操做，使用體驗更好。

　　2、儲存空間大。IndexedDB可儲存數百MB以上的數據量（250MB以上）。

　　3、鍵值對儲存。同前述兩種儲存方式同樣，IndexedDB也是採用鍵值對的儲存方式，主鍵具備惟一性，一樣使用JSON格式儲存數據，且除字符串外還能夠儲存二進制數據。

　　4、同源限制。正如大多數的 web 儲存解決方案同樣，IndexedDB 也遵照同源策略。所以當你在某個域名下操做儲存數據的時候，你不能操做其餘域名下的數據。

　　（1）IndexedDB的使用

　　經過IndexedDB.open()打開或建立一個新的數據庫，並指定一個版本（新建版本默認爲1），該方法返回的對象對應三種操做結果

const request = window.indexedDB.open('transcript', 1)

request.onerror = function (event) { console.log('數據庫打開報錯'); }; var db; request.onsuccess = function (event) { db = request.result; console.log('數據庫打開成功'); };  request.onupgradeneeded = function (event) { db = event.target.result; console.log('指定的版本號，大於數據庫的實際版本號，數據庫升級'); }

　　若是打開時指定數據庫不存在就會新建，新建後觸發upgradeneeded事件，並在onupgradeneeded監聽事件中完成後續操做。
　　

request.onupgradeneeded = function(event) { db = event.target.result; // 新建一張名爲person，主鍵爲id的表格 var objectStore; if (!db.objectStoreNames.contains('person')) { // 若是不存在則新建 objectStore = db.createObjectStore('person', { keyPath: 'id' }); } } 

　　主鍵至關於屬性，主鍵是數據庫表中的惟一性索引且只能有一個主鍵，新建表後能夠新建索引，索引能夠幫助查找數據。

objectStore.createIndex('name', 'name', { unique: true })
objectStore.createIndex('grade', 'grade', { unique: true })

　　IDBObject.createIndex()的三個參數分別爲索引名稱、索引所在的屬性、配置對象（說明該屬性是否包含重複的值）。

　　IndexedDB有一個事務對象，在事務中能夠爲對象倉庫添加數據和讀取數據。新建事務後經過事務的objectStore(name)方法，獲取對象倉庫，對象倉庫經過add()方法向其中寫入數據記錄。

function recordGrades() { var request = db.transaction(['person'], 'readwrite') .objectStore('person') .add({ id: 1, name: '張三', grade: 100}); request.onsuccess = function (event) { console.log('成績錄入成功'); }; request.onerror = function (event) { console.log('成績錄入失敗'); } } recordGrades();

 　　寫入數據是一個異步的過程，它有success和error兩個返回狀態，能夠在這兩個狀態中設計相應的回調函數。讀取數據時也是經過事務transaction對象，只須要傳入表格的名稱，而後經過get()方法讀取數據。此外，經過delete()方法能夠刪除數據記錄，當用createIndex()建立了索引時，能夠用對象倉庫的index()屬性獲取索引名稱，從索引名稱中檢索獲取指定的數據記錄。

　　

var transaction = db.trancaction(['person']) // 經過事務transaction對象 var personStore = transaction.objectStore('person') var getData = personStore.get(1) getData .onsuccess = function(event) { 　　console.log('Grade for' + getData.result.name + "is" + getData .result.grade) } const grades = [ 　　{id: 2, name: '李四', grade: 96}, 　　{id: 3, name: '王五', grade: 97} ] const request = window.indexedDB.open('transcript', 2) request.onupgradeneeded = function (event) { db = event.target.result // 新建一張名爲person，主鍵爲id的表格 var objectStore if (!db.objectStoreNames.contains('person')) { // 若是不存在則新建 objectStore = db.createObjectStore('person', { keyPath: 'id' }) objectStore.createIndex('name', 'name', { unique: false }) objectStore.createIndex('grade', 'grade', { unique: true }) objectStore.transaction.oncomplete = function (event) { var request1 = db.transaction(['person'], 'readwrite').objectStore('person').add({ id: 1, name: '張三', grade: 100 }) var transcriptName = db.transaction(['person'], 'readwrite').objectStore('person') // add()添加數據 grades.forEach((item) => { transcriptName.add(item) } // delete()刪除數據 var delRequest = db.transaction(["person"], "readwrite").objectStore("person").delete("1") delRequest.onsuccess = function(event) { 　　　　　　 console.log("數據已刪除") 　　　　 } // openCursor()遍歷數據 var cursorStore = db.transaction('person').objectStore('person') cursorStore.openCursor().onsuccess = function (event) { var cursor = event.target.result; if (cursor) { console.log('Id: ' + cursor.key) console.log('Name: ' + cursor.value.name) console.log('Grade: ' + cursor.value.grade) cursor.continue(); 　　} else { 　　console.log('沒有更多數據了！') 　　} } // put()更新數據 var putRequest = db.transaction(['person'], 'readwrite').objectStore('person').put({ id: 1, name: '張大三', grade: 99 }); putRequest.onsuccess = function (event) { console.log('數據更新成功') } putRequest.onerror = function (event) { console.log('數據更新失敗') } 　　　// index()獲取索引 var index = objectStore.index("name") index.get("張三").onsuccess = function(event) { console.log("張三的成績是 " + event.target.result.grade); } } } 

 　　

　　（2）經常使用接口

　　IndexedDB的一些經常使用接口爲觸發事件操做數據的存儲和修改提供便利。

　　IDBDataBase 表示一個數據庫鏈接。這是在數據庫中獲取事務的惟一方式。

　　IDBObjectStore 表示容許訪問經過主鍵查找的 IndexedDB 數據庫中的一組數據的對象存儲區。

　　IDBIndex  使用索引來檢索 IndexedDB 數據庫中的數據子集。

　　IDBTransaction 在數據庫上建立一個事務，指定做用域（例如要訪問的存儲對象），並肯定所需的訪問類型（只讀或讀寫）。

　　IDBRequest 處理數據庫請求並提供對結果訪問的通用接口。

　　IDBCursor  用於遍歷objectStore對象的數據。

　　IDBKeyRange 定義可用於從特定範圍內的數據庫檢索數據的鍵範圍。

4、Cookies

 　　Cookies就是一些數據，存儲在客戶端的文本文件中，供服務端識別客戶端用戶信息。一般狀況下，若是沒有主動給Cookie設置一個過時時間，瀏覽器關閉時，Cookie即刪除。咱們可使用document.cookie來執行對cookie的增刪改即讀取操做，他們分別對應的方法以下：

　　建立Cookie：

document.cookie = "isLogin = true"

　　添加過時時間：

document.cookie="iSLogin=true; expires=Sun Jul 20 2021 17:17:55 GMT+0800"

　　讀取Cookie：

var status = document.cookie

　　將一個已有Cookie值按建立方式從新賦值便可完成修改：

document.cookie = "isLogin = false"

　　將Cookie的過時時間修改成之前的時間便可完成刪除操做：

document.cookie="iSLogin=true; expires=Mon Jul 19 2021 17:17:55 GMT+0800"

　　Cookie的儲量較小，基本在4KB之內，會跟隨請求一塊兒發送給服務器。

　　參考：

　　　　瀏覽器數據庫 IndexedDB 入門教程