一、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本質上是對字符串的讀取，如果儲存內容過多會消耗內存空間而導致頁面變卡。而由於其儲存的數據持久有效且容易讀取，所以它的安全性也比較差，不適宜用來保存用戶敏感信息。
二、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作為一種會話級別的儲存，僅在當前會話周期內有效，因此適合作為會話周期內事件及頁面全局通信的臨時性使用的數據儲存方式，不能夠儲存長期使用的靜態資源數據。
三、IndexedDB
前面提到的兩種數據儲存方式，它們的儲存量都在10MB以內，雖然遠遠大於cookie的4KB儲存空間，但是依然不適合作為客戶端大量儲存數據的方式。因此，適用於客戶端儲存大容量數據的瀏覽器數據庫IndexedDB應運而生。簡單地說，IndexedDB作為一種本地數據庫，具有以下幾個特點：
一、異步操作。與前面提到的兩種數據儲存方式不同，IndexedDB支持數據讀寫時的異步操作，而不是同步語句。localStorage和sessionStorage主要應用於少量數據的讀取，因此進行同步操作對用戶的延遲感受不那么明顯，但是IndexedDB通常涉及大量數據的讀寫操作，而同步的設計會拖慢網頁，鎖死瀏覽器，造成卡頓，而異步設計使得用戶可以進行其他操作，使用體驗更好。
二、儲存空間大。IndexedDB可儲存數百MB以上的數據量（250MB以上）。
三、鍵值對儲存。同前述兩種儲存方式一樣，IndexedDB也是采用鍵值對的儲存方式，主鍵具有唯一性，同樣使用JSON格式儲存數據，且除字符串外還可以儲存二進制數據。
四、同源限制。正如大多數的 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 定義可用於從特定范圍內的數據庫檢索數據的鍵范圍。
四、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以內，會跟隨請求一起發送給服務器。
參考：