数据库操作对象 db,用于与浏览器的 localStorage 交互

简介: 数据库操作对象 db,用于与浏览器的 localStorage 交互

代码

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 交互的过程。

相关文章
不同的浏览器创建的对象是不同的
不同的浏览器创建的对象是不同的
|
6天前
|
JSON 缓存 数据库
Django ORM的QuerySet:解锁数据库交互的魔法钥匙
Django ORM的QuerySet:解锁数据库交互的魔法钥匙
|
10天前
|
编解码 JavaScript 前端开发
**BOM**是浏览器对象模型,用于控制浏览器窗口
【6月更文挑战第22天】**BOM**是浏览器对象模型,用于控制浏览器窗口,如`window`、`navigator`、`location`等,提供弹窗、定时器及事件处理功能。**DOM**是文档对象模型,将HTML文档转化为可编程的树结构,允许创建、修改元素及处理事件。两者协同工作,赋能JavaScript与网页交互。
13 2
|
5天前
|
编译器 API 数据库
技术好文共享:(xxxx)十一:SQLite3的db数据库解密(三)数据库在线备份
技术好文共享:(xxxx)十一:SQLite3的db数据库解密(三)数据库在线备份
|
5天前
|
存储 SQL PHP
PHP中的PDO与数据库交互
PHP的PDO扩展提供了一种方式来统一访问多种数据库
|
6天前
|
XML 机器学习/深度学习 存储
技术心得:对象的序列化存入数据库,与反序列化
技术心得:对象的序列化存入数据库,与反序列化
|
7天前
|
缓存 Java 数据库连接
解析Hibernate与JPA:Java对象的数据库化之旅
【6月更文挑战第25天】在Java企业开发中,Hibernate和JPA提供优雅的数据持久化方案。Hibernate是JPA规范的强大ORM实现,简化对象与数据库映射。配置环境后,通过@Entity注解定义实体类映射表,如`User`类映射"users"表。利用JPA的EntityManager执行查询和更新,如JPQL查询及对象更新。事务管理和性能优化是关键,确保数据完整性和应用性能。本文揭示了Hibernate与JPA的最佳实践,助开发者从容应对数据持久化。
|
7天前
|
缓存 Java 数据库连接
构建高效数据库交互:Hibernate与JPA的性能优化策略
【6月更文挑战第25天】在大数据时代,优化Hibernate和JPA的数据库性能至关重要。本文探讨了优化策略:正确配置映射以减少冗余,利用JPQL/HQL提升查询效率,避免全字段选择,使用索引和分页,有效利用缓存策略,以及管理事务以平衡资源锁定。示例代码展示了分页查询的实现,以防止性能下降。
|
7天前
|
存储 Java 数据库连接
深入探索Hibernate与JPA:Java对象与数据库表的桥梁
【6月更文挑战第25天】Java ORM如Hibernate和JPA简化了数据库交互。在电商系统案例中,JPA注解如`@Entity`、`@Table`、`@Id`定义了对象-表映射。Hibernate利用这些定义实现持久化,如`Session.save()`保存用户对象至数据库,降低了复杂性并提升了开发效率。
|
11天前
|
SQL 关系型数据库 MySQL
零基础学习数据库SQL语句之定义数据库对象的DDL语句
零基础学习数据库SQL语句之定义数据库对象的DDL语句
15 0