客戶端存儲允許我們在用戶的瀏覽器中存儲數據，從而提高應用的性能和用戶體驗。

曾經使用的比較多的存儲方式是 cookie，但現在比較常見的客戶端存儲方式有本地存儲（Local Storage）、session Storage 和 IndexedDB。

本地存儲（Local Storage）

本地存儲是 HTML5 提供的一種簡單的鍵值對存儲方式。它的特點包括：

• 數據類型：只能存儲字符串類型的數據。

• 容量：通常為 5MB，具體大小因瀏覽器而異。

• 操作簡單：API 簡單易用，適合存儲少量的、簡單的數據。

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

本地存儲適用于存儲少量的、簡單的、非敏感的數據，如用戶設置、簡單的緩存等。例如，存儲用戶的主題偏好、字體大小等設置。

存儲數據

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

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

讀取數據

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

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

刪除數據

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

localStorage.removeItem('username'); 

清空所有數據

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

localStorage.clear(); 

數據類型處理

本地存儲只能存儲字符串類型的數據。

如果需要存儲對象或數組，可以使用 JSON.stringify() 將其轉換為字符串，讀取時使用 JSON.parse() 將其轉換回對象或數組。

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

本地存儲的容量限制

本地存儲的容量通常為 5MB，但具體大小可能因瀏覽器而異。

如果存儲的數據超過容量限制，會拋出 QuotaExceededError 異常。

因此，在存儲大量數據時，需要注意容量限制，并進行相應的處理。

安全性考慮

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

為了提高安全性，可以對數據進行加密后再存儲，但這仍然不能完全避免安全風險。

實際應用示例

使用本地存儲實現持久化用戶設置。

// 存儲用戶設置 function saveSettings(settings) {   localStorage.setItem('userSettings', JSON.stringify(settings)); }  // 讀取用戶設置 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 數據僅在頁面會話期間有效，關閉瀏覽器標簽頁或窗口后數據會被清除。

所以它的適用于存儲臨時數據，如表單數據、頁面狀態等。

IndexedDB

IndexedDB 用于在用戶的瀏覽器中存儲大量的結構化數據。它的特點包括：

• 數據類型：可以存儲各種類型的數據，包括對象、數組、Blob 等。

• 容量：容量較大，通常為幾十 MB 到幾百 MB，具體大小因瀏覽器而異。

• 操作復雜：API 較為復雜，支持事務、索引等高級功能。

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

當然可以！以下是 IndexedDB 的具體使用說明，包括創建數據庫、存儲數據、讀取數據、更新數據和刪除數據的步驟和示例代碼。

IndexedDB 使用說明

如果接觸過數據庫的概念，就比較好容易理解下面關于 IndexedDB 的創建，打開，讀取，更新，刪除等操作。

首先，需要創建一個新的或打開一個現有的數據庫。

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

假設有一個數據庫名為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); }; 

要存儲數據，需要先開啟一個事務，然后通過對象存儲（Object Store）來添加數據。

假設我們要存儲用戶信息，包括名稱，年齡。

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);   }; }; 

存儲完之后，就可以使用了。

讀取數據同樣需要開啟一個事務，然后通過對象存儲來獲取數據。

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() 方法數據可以被更新。

它會根據主鍵（keyPath）來更新已有的數據。

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);   }; }; 

刪除數據時，則可以使用 delete() 方法，通過主鍵來刪除指定的數據。

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兩個方法，這是比較好的編碼習慣，還記得前一篇里講過的錯誤處理嗎？

總結

• ?? 現在比較常見的客戶端存儲方式有本地存儲（Local Storage）、session Storage 和 IndexedDB。

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

• ?? IndexedDB 用于在用戶的瀏覽器中存儲大量的結構化數據。