客戶端存儲(chǔ)允許我們?cè)谟脩舻臑g覽器中存儲(chǔ)數(shù)據(jù)，從而提高應(yīng)用的性能和用戶體驗(yàn)。
曾經(jīng)使用的比較多的存儲(chǔ)方式是 cookie，但現(xiàn)在比較常見的客戶端存儲(chǔ)方式有本地存儲(chǔ)（Local Storage）、session Storage 和 IndexedDB。
本地存儲(chǔ)（Local Storage）
本地存儲(chǔ)是 HTML5 提供的一種簡單的鍵值對(duì)存儲(chǔ)方式。它的特點(diǎn)包括：
數(shù)據(jù)類型：只能存儲(chǔ)字符串類型的數(shù)據(jù)。
容量：通常為 5MB，具體大小因?yàn)g覽器而異。
操作簡單：API 簡單易用，適合存儲(chǔ)少量的、簡單的數(shù)據(jù)。
同步操作：所有操作都是同步的，可能會(huì)阻塞主線程，影響性能。
本地存儲(chǔ)適用于存儲(chǔ)少量的、簡單的、非敏感的數(shù)據(jù)，如用戶設(shè)置、簡單的緩存等。例如，存儲(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ù)超過容量限制，會(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ù)僅在頁面會(huì)話期間有效，關(guān)閉瀏覽器標(biāo)簽頁或窗口后數(shù)據(jù)會(huì)被清除。
所以它的適用于存儲(chǔ)臨時(shí)數(shù)據(jù)，如表單數(shù)據(jù)、頁面狀態(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 的具體使用說明，包括創(chuàng)建數(shù)據(jù)庫、存儲(chǔ)數(shù)據(jù)、讀取數(shù)據(jù)、更新數(shù)據(jù)和刪除數(shù)據(jù)的步驟和示例代碼。
IndexedDB 使用說明
如果接觸過數(shù)據(jù)庫的概念，就比較好容易理解下面關(guān)于 IndexedDB 的創(chuàng)建，打開，讀取，更新，刪除等操作。
首先，需要?jiǎng)?chuàng)建一個(gè)新的或打開一個(gè)現(xiàn)有的數(shù)據(jù)庫。
使用 indexedDB.open() 方法來完成此操作。
假設(shè)有一個(gè)數(shù)據(jù)庫名為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ù)，然后通過對(duì)象存儲(chǔ)（Object Store）來添加數(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ù)，然后通過對(duì)象存儲(chǔ)來獲取數(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）來更新已有的數(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() 方法，通過主鍵來刪除指定的數(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í)慣，還記得前一篇里講過的錯(cuò)誤處理嗎？
總結(jié)
?? 現(xiàn)在比較常見的客戶端存儲(chǔ)方式有本地存儲(chǔ)（Local Storage）、session Storage 和 IndexedDB。
?? 本地存儲(chǔ)和 session Storage 只能存儲(chǔ)字符串類型的數(shù)據(jù)，且有容量限制 為 5MB。
?? IndexedDB 用于在用戶的瀏覽器中存儲(chǔ)大量的結(jié)構(gòu)化數(shù)據(jù)。
該文章在 2024/11/1 9:08:18 編輯過
400 186 1886
