客户端存储允许我们在用户的浏览器中存储数据，从而提高应用的性能和用户体验。

曾经使用的比较多的存储方式是 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 用于在用户的浏览器中存储大量的结构化数据。