本地存儲就是指在瀏覽器中存儲數據，是相對于服務器中存儲數據來說的。

1. 本地存儲的分類

瀏覽器的本地存儲主要包括4種方式：Cookie、Storage、SQL數據庫和IndexedDB。

Cookie

Cookie提出來得最早，其最初的設計目的只是為了保存用戶的登錄信息，所以并不適合保存大量數據。Cookie容量小，將保存的數據拼接成字符串的形式跟程序進行操作。沒打開一個網址，瀏覽器都會將該網站下的所有Cookie數據全部傳到服務器端，因為其最初的設計目的只是用來保護用戶的登錄信息(例如SessionId)。

Storage

Sotrage是HTML5中用于存儲本地數據的對象，因為其設計目的就是存儲本地數據，所以其操作比Cookie靈活得多。Storage容量比Cookie大，可以直接按照鍵值對存儲數據并使用鍵名獲取數據。Storage分為sessionStorage和localStorage,前者在瀏覽器關閉后就會被清除，后者會一直存儲在瀏覽器中，除非人為或代碼清除。

SQL數據庫

SQL數據庫在瀏覽器中封裝了一個小型的SQLLite數據庫，但是從前端架構上并不適合使用。例如：JS對象的屬性隨時都可能發生改變，可能增刪，也可能修改數據類型，但是SQL數據庫要求在對數據操作之前就先確定好數據的結構。

IndexedDB

IndexedDB屬于一種noSQL數據庫，是非結構化的，它所保存的數據記錄跟JS的對象一樣可以隨時變化屬性(字段)。與Storage相比，它可以保存更多的數據，而且還可以使用數據庫的索引、事務等相關概念，但是使用起來要比Storage復雜不少。

2. Storage存儲

Storage是window對象的一個function類型的屬性對象，但是這個function對象比較特別，它既不可以當作方法來執行，也不可以用來創建實例對象，JS引擎會默認為創建兩個Storage的實例對象，直接調用就可以了。JS引擎創建的兩個Storage實例對象分別是sessionStorage和localStorage，前者用于暫時保存，瀏覽器關閉后數據就會丟失；后者用于長久保存，及時關閉瀏覽器數據也不會丟失。Storage.prototype:??操作數據的方法有：

• getItem(key)

• setItem(key, value)

• removeItem(key)

• clear()

在控制臺利用session storage setItem設置一個值后可以在Application的Session Storage查看：??

localStorage與sessionStorage在方法上使用相同，不同之處就在存儲后數據清除方式不同。

3. StorageEvent

Storage實例對象修改數據的時候會觸發一個StorageEvent事件，這個事件有些特別，當事件觸發后，消息會發送到打開的所有當前網站的其他頁面中(當然要在同一個瀏覽器中)，至于是否會發送給當前頁面，不同的瀏覽器有不不同的處理方法。(個人測試以下幾個瀏覽器行為均相同，不發送給當前頁面：谷歌瀏覽器(85.0.4183.83)、(Microsoft Edge 44.18362.449.0)、Firefox(78.0.2 (64 位))、雙核瀏覽器(版本 1.0.4.2)) StorageEvent.prototype:?

代碼示例：

lang="en">

charset="UTF-8">

name="viewport" content="width=device-width, initial-scale=1.0">

Document

value="Test Storage" type="button" id='button'/>

const btn = document.querySelector('#button');

btn.onclick = () => {

localStorage.setItem('testKey', 'testValue1');

}

window.addEventListener('storage', function(e){

console.log(`key: ${e.key}`);

console.log(`oldValue: ${e.oldValue}`);

console.log(`newValue: ${e.newValue}`);

console.log(`url: ${e.url}`);

console.log(`is localStorage: ${e.storageArea === localStorage}`);

});

4. IndexedDB 數據庫簡介

IndexedDB數據庫是一種noSQL數據庫，但是其所用到的概念大部分跟SQL數據庫類似，當然也存在不完全相同的地方。不同之處僅在于IndexedDB數據庫不是將對象轉換為記錄，然后再保存到表里面，而是直接保存的對象，它是通過“ID->數據對象”這種模式來保存的。

IndexedDB數據庫操作

跟IndexedDB數據庫相關的對象主要包括11個對象：IDBFactory、IDBDatabase、IDBObjectStore、IDBIndex、IDBKeyRange、IDBCursor、IDBCursorWithValue、IDBTransaction、IDBVersionChangeEvent、IDBOpenDBRequest和IDBRequest。這11個對象都是window的function類型的屬性對象，使用時都使用其示例，但不需要用戶自己使用new來創建，在需要的時候就可以自動獲取。11個對象可以分為4類：數據庫和ObjecStore相關對象、數據相關對象、查詢相關對象和輔助對象。氣筒輔助對象包括IDBVersionChangeEvent、IDBOpenDBRequest和IDBRequest。

數據庫和ObjectStore相關操作

創建/打開數據庫 IndexedDB數據庫的操作是基于事件的，或者說是異步處理的。open方法返回的是一個IDBOpenDBRequest的實力對象，常用屬性有onsuccess、onerror、onupgradeneeded，分別表示打開成功、打開失敗和數據庫版本升級。

語法：

const db_worker = indexedDB.open('dbName', dbVersion);

示例:

const workerDBRequest = indexedDB.open('database', 1);

workerDBRequest.onerror = function(event) {

console.log('打開數據庫失敗');

}

workerDBRequest.onsuccess = function(event) {

db_worker = workerDBRequest.result; // 也可以使用event.target.result

console.log('打開成功');

}

??

創建ObjectStore 通過上圖，我們可以看出， indexedDB.open()，返回的是一個IDBOpenDBRequest對象，IDBOpenDBRequest的result是一個IDBDatabase對象，有了這個對象，就可以創建ObjectStore了。這個result包含的屬性方法如下：??createObjectStore、deleteObjectStore分別用于創建和刪除ObjectStore。

注意：createObjectStore、deleteObjectStore只能在onupgradeneeded方法中執行。

createObjectStore方法有兩個參數，第一個參數是所要創建的ObjectSore的名字，第二個參數是一個對象，用于描述ID，該對象可以有兩個屬性：keyPath和autoIncrement，前者用來指定一個對象中的屬性用作ID，后者若為true則會在保存數據時用Generator生成一個ID，但是這里需要自己創建一個Generator。示例如下：

const workerDBRequest = indexedDB.open('worker', 2);

workerDBRequest.onerror = function(event) {

console.log('打開數據庫失敗');

}

workerDBRequest.onsuccess = function(event) {

db_worker = workerDBRequest.result; // 也可以使用event.target.result

console.log('打開數據庫成功');

}

workerDBRequest.onupgradeneeded = function(e) {

var db = workerDBRequest.result;

db.createObjectStore('category', {});

console.log(`${db.name} 的版本號修改為了${db.version}`);

}

數據操作相關

數據相關操作除了前面介紹的之外，主要還要用到表示事務的IDBTransaction對象。數據庫(IDBDatabse的實例對象)的絕大多數操作都需要用事務來完成，數據庫實例對象包含一個transaction方法屬性(其實是IDBDatabase.prototype的屬性)，調用該屬性方法就可以創建事務。transaction方法有兩個參數，第一個參數用于指定要操作的ObjectStore，可以是一個，也可以是多個，多個采用數組傳遞；第二個參數指定事務的類型，可以是readonly(默認)或者readwrite，分別表示創建只讀或讀寫事務。

IDBTransaction實例所包含的屬性：

["objectStoreNames", "mode", "db", "error", "onabort", "oncomplete", "onerror", "objectStore", "commit", "abort", "durability", "constructor"]?

IDBObjectStore實例包含的屬性：

["name", "keyPath", "indexNames", "transaction", "autoIncrement", "put", "add", "delete", "clear", "get", "getKey", "getAll", "getAllKeys", "count", "openCursor", "openKeyCursor", "index", "createIndex", "deleteIndex", "constructor"]?

增加數據

示例：

const workerDBRequest = indexedDB.open('worker', 3);

workerDBRequest.onerror = function(event) {

console.log('打開數據庫失敗');

}

workerDBRequest.onupgradeneeded = function(e) {

var db = workerDBRequest.result;

db.createObjectStore('category', {keyPath: 'id'});

console.log(`${db.name} 的版本號修改為了${db.version}`);

}

workerDBRequest.onsuccess = function(event) {

db_worker = workerDBRequest.result; // 也可以使用event.target.result

console.log('打開數據庫成功');

workerDBOpenSuccess();

}

function workerDBOpenSuccess() {

const tx_category = db_worker.transaction('category', 'readwrite');

const store_category = tx_category.objectStore('category');

const category1 = {'id':007, 'name':'zzh', 'age':18};

const categoryAddRequest = store_category.add(category1);

categoryAddRequest.onsuccess = function(event) {

console.log('保存成功');

}

categoryAddRequest.onerror = function(evevt) {

console.log('保存失敗');

}

}

查詢數據

實例：

const workerDBRequest = indexedDB.open('worker', 3);

workerDBRequest.onerror = function(event) {

console.log('打開數據庫失敗');

}

workerDBRequest.onupgradeneeded = function(e) {

var db = workerDBRequest.result;

db.createObjectStore('category', {keyPath: 'id'});

console.log(`${db.name} 的版本號修改為了${db.version}`);

}

workerDBRequest.onsuccess = function(event) {

db_worker = workerDBRequest.result; // 也可以使用event.target.result

console.log('打開數據庫成功');

workerDBOpenSuccess();

}

function workerDBOpenSuccess() {

const tx_category = db_worker.transaction('category', 'readwrite');

const store_category = tx_category.objectStore('category');

const categoryGetRequest = store_category.get(7);

categoryGetRequest.onsuccess = function (event) {

console.log(`查詢成功： ${JSON.stringify(categoryGetRequest.result)}`);

}

}

?查詢的方式還有很多種，就像關系型數據庫一樣，查詢可以根據不同的條件篩選數據。

修改數據

const workerDBRequest = indexedDB.open('worker', 3);

workerDBRequest.onerror = function (event) {

console.log('打開數據庫失敗');

}

workerDBRequest.onupgradeneeded = function (e) {

var db = workerDBRequest.result;

db.createObjectStore('category', {

keyPath: 'id'

});

console.log(`${db.name} 的版本號修改為了${db.version}`);

}

workerDBRequest.onsuccess = function (event) {

db_worker = workerDBRequest.result; // 也可以使用event.target.result

console.log('打開數據庫成功');

workerDBOpenSuccess();

}

function workerDBOpenSuccess() {

const tx_category = db_worker.transaction('category', 'readwrite');

const store_category = tx_category.objectStore('category');

const categoryGetRequest = store_category.get(7);

categoryGetRequest.onsuccess = function (event) {

console.log(`查詢成功： ${JSON.stringify(categoryGetRequest.result)}`);

let data = event.target.result;

data.age = 19;

const categoryPutRequest = store_category.put(data);

categoryPutRequest.onsuccess = function (event) {

console.log('更新成功');

}

}

}

?IndexedDB可能不會實時更新顯示，有時需要刷新后查看，實際值已經修改。?

刪除數據

示例：

const workerDBRequest = indexedDB.open('worker', 3);

workerDBRequest.onerror = function (event) {

console.log('打開數據庫失敗');

}

workerDBRequest.onupgradeneeded = function (e) {

var db = workerDBRequest.result;

db.createObjectStore('category', {

keyPath: 'id'

});

console.log(`${db.name} 的版本號修改為了${db.version}`);

}

workerDBRequest.onsuccess = function (event) {

db_worker = workerDBRequest.result; // 也可以使用event.target.result

console.log('打開數據庫成功');

workerDBOpenSuccess();

}

function workerDBOpenSuccess() {

const tx_category = db_worker.transaction('category', 'readwrite');

const store_category = tx_category.objectStore('category');

const categoryDeleteRequest = store_category.delete(7); // 根據id刪除

categoryDeleteRequest.onsuccess = function(event) {

console.log('刪除成功');

}

}

顯示需要刷新后查看。?

IndexedDB的操作還有很多，首先大概理解下noSQL的原理，然后再對這些對象，以及對象可進行的操作進行理解使用。感興趣的也可以參看MDN詳解：https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDBAPI/UsingIndexedDB

掃二維碼｜添加微信

掃碼關注

微信號｜iotzzh

公眾號｜前端微說

總結

以上是生活随笔為你收集整理的js清空本地存储_JS原理、方法与实践 本地存储的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。