代码
let db = { save (key, value) { localStorage.setItem(key, JSON.stringify(value)) }, get (key, defaultValue = {}) { if (localStorage.getItem(key)) { return JSON.parse(localStorage.getItem(key)) } else { return defaultValue } }, remove (key) { localStorage.removeItem(key) }, clear () { for (var key in localStorage) { if (key !== 'USER_FIXED_COLUMN') { localStorage.removeItem(key) } } } } export default db
这段代码定义了一个简单的数据库操作对象 db,用于与浏览器的 localStorage 交互。localStorage 是一种 Web 存储机制,可以在客户端存储键值对数据,这些数据在页面刷新后依然存在。下面对这段代码的各部分进行详细解释:
db 对象
db 对象包含四个方法:save、get、remove 和 clear。这些方法用于保存、获取、删除和清除 localStorage 中的数据。
save 方法
save (key, value) { localStorage.setItem(key, JSON.stringify(value)) }
- 功能:将数据保存到 localStorage 中。
- 参数:
- key:存储数据的键名。
- value:存储的数据值,在存储之前会被转换为 JSON 字符串。
- 实现:使用 localStorage.setItem 方法将键值对存储到 localStorage 中。由于 localStorage 只能存储字符串,因此使用 JSON.stringify 将 value 转换为 JSON 字符串。
get 方法
get (key, defaultValue = {}) { if (localStorage.getItem(key)) { return JSON.parse(localStorage.getItem(key)) } else { return defaultValue } }
- 功能:从 localStorage 中获取数据。
- 参数:
- key:要获取数据的键名。
- defaultValue(可选):如果 localStorage 中不存在该键,返回的默认值,默认为空对象 {}。
- 实现:
- 检查 localStorage 中是否存在指定的键。
- 如果存在,则使用 JSON.parse 将存储的 JSON 字符串转换为 JavaScript 对象并返回。
- 如果不存在,则返回 defaultValue。
remove 方法
remove (key) { localStorage.removeItem(key) }
- 功能:从 localStorage 中删除指定键的数据。
- 参数:
- key:要删除数据的键名。
- 实现:使用 localStorage.removeItem 方法删除指定键的数据。
clear 方法
clear () { for (var key in localStorage) { if (key !== 'USER_FIXED_COLUMN') { localStorage.removeItem(key) } } }
- 功能:清除 localStorage 中的所有数据,除了键名为 'USER_FIXED_COLUMN' 的数据。
- 实现:
- 使用 for...in 循环遍历 localStorage 中的所有键。
- 对于每个键,如果键名不是 'USER_FIXED_COLUMN',则使用 localStorage.removeItem 删除该键。
export default db
- 功能:将 db 对象作为默认导出,使其可以在其他模块中导入和使用。
示例用法
// 保存数据 db.save('user', { name: 'John Doe', age: 30 }) // 获取数据 const user = db.get('user') console.log(user) // 输出:{ name: 'John Doe', age: 30 } // 删除数据 db.remove('user') // 清除所有数据(除了 'USER_FIXED_COLUMN') db.clear()
通过这个 db 对象,可以方便地进行 localStorage 的存取操作。它提供了基本的 CRUD(创建、读取、更新、删除)功能,简化了与 localStorage 交互的过程。