客户端存储允许我们在用户的浏览器中存储数据,从而提高应用的性能和用户体验。
曾经使用的比较多的存储方式是 cookie,但现在比较常见的客户端存储方式有本地存储(Local Storage)、session Storage 和 IndexedDB。
本地存储(Local Storage)
本地存储是 HTML5 提供的一种简单的键值对存储方式。它的特点包括:
本地存储适用于存储少量的、简单的、非敏感的数据,如用户设置、简单的缓存等。例如,存储用户的主题偏好、字体大小等设置。
存储数据
使用 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 用于在用户的浏览器中存储大量的结构化数据。
该文章在 2024/11/1 9:08:18 编辑过