数据库操作对象 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 交互的过程。

相关文章
|
1月前
|
存储 SQL 关系型数据库
PHP与数据库交互:从基础到进阶
【10月更文挑战第9天】在编程的世界里,数据是流动的血液,而数据库则是存储这些珍贵资源的心脏。PHP作为一门流行的服务器端脚本语言,其与数据库的交互能力至关重要。本文将带你从PHP与数据库的基本连接开始,逐步深入到复杂查询的编写和优化,以及如何使用PHP处理数据库结果。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供宝贵的知识和技巧,让你在PHP和数据库交互的道路上更加从容不迫。
|
1月前
|
SQL 数据库
LangChain-09 Query SQL DB With RUN GPT 查询数据库 并 执行SQL 返回结果
LangChain-09 Query SQL DB With RUN GPT 查询数据库 并 执行SQL 返回结果
33 2
|
7天前
|
存储 SQL API
探索后端开发:构建高效API与数据库交互
【10月更文挑战第36天】在数字化时代,后端开发是连接用户界面和数据存储的桥梁。本文深入探讨如何设计高效的API以及如何实现API与数据库之间的无缝交互,确保数据的一致性和高性能。我们将从基础概念出发,逐步深入到实战技巧,为读者提供一个清晰的后端开发路线图。
|
23天前
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
|
1月前
|
Web App开发 SQL 数据库
使用 Python 解析火狐浏览器的 SQLite3 数据库
本文介绍如何使用 Python 解析火狐浏览器的 SQLite3 数据库,包括书签、历史记录和下载记录等。通过安装 Python 和 SQLite3,定位火狐数据库文件路径,编写 Python 脚本连接数据库并执行 SQL 查询,最终输出最近访问的网站历史记录。
|
1月前
|
Web App开发 JavaScript 前端开发
JavaScript Window - 浏览器对象模型
JavaScript Window - 浏览器对象模型
22 2
|
24天前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
|
2月前
|
JavaScript 前端开发
js之浏览器对象|28
js之浏览器对象|28
|
2月前
|
SQL 关系型数据库 数据库连接
php连接数据库之PDO,PDO的简单使用和预定义占位符的使用以及PDOStatement对象的使用,占位符的不同形式,bindValue和bindParam绑定预定义占位符参数的区别
本文介绍了PHP中PDO(PHP Data Objects)扩展的基本概念和使用方法。内容包括PDO类和PDOStatement类的介绍,PDO的简单使用,预定义占位符的使用方法,以及PDOStatement对象的使用。文章还讨论了绑定预定义占位符参数的不同形式,即bindValue和bindParam的区别。通过具体示例,展示了如何使用PDO进行数据库连接、数据查询、数据插入等操作。
php连接数据库之PDO,PDO的简单使用和预定义占位符的使用以及PDOStatement对象的使用,占位符的不同形式,bindValue和bindParam绑定预定义占位符参数的区别
|
2月前
|
存储 编解码 JSON
解决浏览器存储问题,不得不了解的cookie、localStorage和sessionStorage
该文章详细对比了浏览器存储机制中的cookie、localStorage和sessionStorage的不同之处,以及各自的适用场景。