客戶端存儲(chǔ)允許我們?cè)谟脩舻臑g覽器中存儲(chǔ)數(shù)據(jù)，從而提高應(yīng)用的性能和用戶體驗(yàn)。

曾經(jīng)使用的比較多的存儲(chǔ)方式是 cookie，但現(xiàn)在比較常見(jiàn)的客戶端存儲(chǔ)方式有本地存儲(chǔ)（Local Storage）、session Storage 和 IndexedDB。

本地存儲(chǔ)（Local Storage）

本地存儲(chǔ)是 HTML5 提供的一種簡(jiǎn)單的鍵值對(duì)存儲(chǔ)方式。它的特點(diǎn)包括：

• 數(shù)據(jù)類型：只能存儲(chǔ)字符串類型的數(shù)據(jù)。

• 容量：通常為 5MB，具體大小因?yàn)g覽器而異。

• 操作簡(jiǎn)單：API 簡(jiǎn)單易用，適合存儲(chǔ)少量的、簡(jiǎn)單的數(shù)據(jù)。

• 同步操作：所有操作都是同步的，可能會(huì)阻塞主線程，影響性能。

本地存儲(chǔ)適用于存儲(chǔ)少量的、簡(jiǎn)單的、非敏感的數(shù)據(jù)，如用戶設(shè)置、簡(jiǎn)單的緩存等。例如，存儲(chǔ)用戶的主題偏好、字體大小等設(shè)置。

存儲(chǔ)數(shù)據(jù)

使用 localStorage.setItem(key, value) 方法可以將數(shù)據(jù)存儲(chǔ)到本地存儲(chǔ)中。

localStorage.setItem('username', '張三'); 

讀取數(shù)據(jù)

使用 localStorage.getItem(key) 方法可以讀取存儲(chǔ)的數(shù)據(jù)。

let username = localStorage.getItem('username'); console.log(username); // 輸出: 張三 

刪除數(shù)據(jù)

使用 localStorage.removeItem(key) 方法可以刪除指定的數(shù)據(jù)。

localStorage.removeItem('username'); 

清空所有數(shù)據(jù)

使用 localStorage.clear() 方法可以清空所有存儲(chǔ)在本地存儲(chǔ)中的數(shù)據(jù)。

localStorage.clear(); 

數(shù)據(jù)類型處理

本地存儲(chǔ)只能存儲(chǔ)字符串類型的數(shù)據(jù)。

如果需要存儲(chǔ)對(duì)象或數(shù)組，可以使用 JSON.stringify() 將其轉(zhuǎn)換為字符串，讀取時(shí)使用 JSON.parse() 將其轉(zhuǎn)換回對(duì)象或數(shù)組。

let user = { name: 'John', age: 30 }; localStorage.setItem('user', JSON.stringify(user));  let storedUser = JSON.parse(localStorage.getItem('user')); console.log(storedUser.name); // 輸出: John 

本地存儲(chǔ)的容量限制

本地存儲(chǔ)的容量通常為 5MB，但具體大小可能因?yàn)g覽器而異。

如果存儲(chǔ)的數(shù)據(jù)超過(guò)容量限制，會(huì)拋出 QuotaExceededError 異常。

因此，在存儲(chǔ)大量數(shù)據(jù)時(shí)，需要注意容量限制，并進(jìn)行相應(yīng)的處理。

安全性考慮

本地存儲(chǔ)的數(shù)據(jù)是以純文本形式存儲(chǔ)的，因此不適合存儲(chǔ)敏感信息，如密碼、信用卡信息等。

為了提高安全性，可以對(duì)數(shù)據(jù)進(jìn)行加密后再存儲(chǔ)，但這仍然不能完全避免安全風(fēng)險(xiǎn)。

實(shí)際應(yīng)用示例

使用本地存儲(chǔ)實(shí)現(xiàn)持久化用戶設(shè)置。

// 存儲(chǔ)用戶設(shè)置 function saveSettings(settings) {   localStorage.setItem('userSettings', JSON.stringify(settings)); }  // 讀取用戶設(shè)置 function loadSettings() {   let settings = localStorage.getItem('userSettings');   return settings ? JSON.parse(settings) : {}; }  // 示例使用 let settings = { theme: 'dark', fontSize: '16px' }; saveSettings(settings);  let loadedSettings = loadSettings(); console.log(loadedSettings.theme); // 輸出: dark 

session Storage

session storage 和 local storage 類似，此處不再展開。

但要注意，session 數(shù)據(jù)僅在頁(yè)面會(huì)話期間有效，關(guān)閉瀏覽器標(biāo)簽頁(yè)或窗口后數(shù)據(jù)會(huì)被清除。

所以它的適用于存儲(chǔ)臨時(shí)數(shù)據(jù)，如表單數(shù)據(jù)、頁(yè)面狀態(tài)等。

IndexedDB

IndexedDB 用于在用戶的瀏覽器中存儲(chǔ)大量的結(jié)構(gòu)化數(shù)據(jù)。它的特點(diǎn)包括：

• 數(shù)據(jù)類型：可以存儲(chǔ)各種類型的數(shù)據(jù)，包括對(duì)象、數(shù)組、Blob 等。

• 容量：容量較大，通常為幾十 MB 到幾百 MB，具體大小因?yàn)g覽器而異。

• 操作復(fù)雜：API 較為復(fù)雜，支持事務(wù)、索引等高級(jí)功能。

• 異步操作：所有操作都是異步的，不會(huì)阻塞主線程，性能更好。

當(dāng)然可以！以下是 IndexedDB 的具體使用說(shuō)明，包括創(chuàng)建數(shù)據(jù)庫(kù)、存儲(chǔ)數(shù)據(jù)、讀取數(shù)據(jù)、更新數(shù)據(jù)和刪除數(shù)據(jù)的步驟和示例代碼。

IndexedDB 使用說(shuō)明

如果接觸過(guò)數(shù)據(jù)庫(kù)的概念，就比較好容易理解下面關(guān)于 IndexedDB 的創(chuàng)建，打開，讀取，更新，刪除等操作。

首先，需要?jiǎng)?chuàng)建一個(gè)新的或打開一個(gè)現(xiàn)有的數(shù)據(jù)庫(kù)。

使用 indexedDB.open() 方法來(lái)完成此操作。

假設(shè)有一個(gè)數(shù)據(jù)庫(kù)名為myDatabase。

let request = indexedDB.open('myDatabase', 1);  // 成功打開 request.onsuccess = function (event) {   let db = event.target.result;   console.log('Database opened successfully'); };  // 失敗處理 request.onerror = function (event) {   console.error('Database error:', event.target.errorCode); }; 

要存儲(chǔ)數(shù)據(jù)，需要先開啟一個(gè)事務(wù)，然后通過(guò)對(duì)象存儲(chǔ)（Object Store）來(lái)添加數(shù)據(jù)。

假設(shè)我們要存儲(chǔ)用戶信息，包括名稱，年齡。

let db; let request = indexedDB.open('myDatabase', 1);  request.onsuccess = function (event) {   db = event.target.result;   let transaction = db.transaction(['users'], 'readwrite');   let objectStore = transaction.objectStore('users');    let user = { id: 1, name: '張三', age: 30 };   let addRequest = objectStore.add(user);    addRequest.onsuccess = function (event) {     console.log('User added to the database');   };    addRequest.onerror = function (event) {     console.error('Error adding user:', event.target.errorCode);   }; }; 

存儲(chǔ)完之后，就可以使用了。

讀取數(shù)據(jù)同樣需要開啟一個(gè)事務(wù)，然后通過(guò)對(duì)象存儲(chǔ)來(lái)獲取數(shù)據(jù)。

let db; let request = indexedDB.open('myDatabase', 1);  request.onsuccess = function (event) {   db = event.target.result;   let transaction = db.transaction(['users'], 'readonly');   let objectStore = transaction.objectStore('users');    let getRequest = objectStore.get(1);    getRequest.onsuccess = function (event) {     if (getRequest.result) {       console.log('User:', getRequest.result);     } else {       console.log('User not found');     }   };    getRequest.onerror = function (event) {     console.error('Error getting user:', event.target.errorCode);   }; }; 

同樣的，使用 put() 方法數(shù)據(jù)可以被更新。

它會(huì)根據(jù)主鍵（keyPath）來(lái)更新已有的數(shù)據(jù)。

let db; let request = indexedDB.open('myDatabase', 1);  request.onsuccess = function (event) {   db = event.target.result;   let transaction = db.transaction(['users'], 'readwrite');   let objectStore = transaction.objectStore('users');    let updatedUser = { id: 1, name: '張三', age: 31 };   let updateRequest = objectStore.put(updatedUser);    updateRequest.onsuccess = function (event) {     console.log('User updated in the database');   };    updateRequest.onerror = function (event) {     console.error('Error updating user:', event.target.errorCode);   }; }; 

刪除數(shù)據(jù)時(shí)，則可以使用 delete() 方法，通過(guò)主鍵來(lái)刪除指定的數(shù)據(jù)。

let db; let request = indexedDB.open('myDatabase', 1);  request.onsuccess = function (event) {   db = event.target.result;   let transaction = db.transaction(['users'], 'readwrite');   let objectStore = transaction.objectStore('users');    //主鍵值為1的用戶   let deleteRequest = objectStore.delete(1);    deleteRequest.onsuccess = function (event) {     console.log('User deleted from the database');   };    deleteRequest.onerror = function (event) {     console.error('Error deleting user:', event.target.errorCode);   }; }; 

在上面的示例里，大家注意到所有的代碼都寫了 onsuccess 和 onerror兩個(gè)方法，這是比較好的編碼習(xí)慣，還記得前一篇里講過(guò)的錯(cuò)誤處理嗎？

總結(jié)

• ?? 現(xiàn)在比較常見(jiàn)的客戶端存儲(chǔ)方式有本地存儲(chǔ)（Local Storage）、session Storage 和 IndexedDB。

• ?? 本地存儲(chǔ)和 session Storage 只能存儲(chǔ)字符串類型的數(shù)據(jù)，且有容量限制 為 5MB。

• ?? IndexedDB 用于在用戶的瀏覽器中存儲(chǔ)大量的結(jié)構(gòu)化數(shù)據(jù)。