闸北企业网站建设,百度关键词排名批量查询,电子商务网站建设选修课,做的好详情页网站IndexedDB - 浏览器内容数据库
indexedDB 是一种浏览器内置的NoSQL数据库#xff0c;它使用键值对存储数据#xff0c;用于在客户端存储大量结构化数据。它支持离线应用程序和高效的数据检索#xff0c;可以在 Web 应用程序中替代传统的 cookie 和 localStorage。 IndexDB是…IndexedDB - 浏览器内容数据库
indexedDB 是一种浏览器内置的NoSQL数据库它使用键值对存储数据用于在客户端存储大量结构化数据。它支持离线应用程序和高效的数据检索可以在 Web 应用程序中替代传统的 cookie 和 localStorage。 IndexDB是一种在浏览器中内置的NoSQL数据库用于在客户端存储和检索数据。它提供了一种持久存储数据的方式可以在离线状态下使用。
使用 indexedDB 需要以下步骤 打开数据库使用 indexedDB.open() 方法打开一个数据库如果数据库不存在则会创建一个新的数据库。 创建对象存储空间使用 createObjectStore() 方法创建一个对象存储空间用于存储数据。可以为每个对象存储空间设置一个名称和一个键路径键路径用于指定对象存储空间中的每个对象的唯一标识符。 存储数据使用 add() 或 put() 方法将数据存储到对象存储空间中。add() 方法用于向对象存储空间中添加新的数据如果该数据已经存在则会抛出错误。put() 方法用于向对象存储空间中添加或更新数据。 检索数据使用 get() 或 getAll() 方法从对象存储空间中检索数据。get() 方法用于检索指定键路径的数据getAll() 方法用于检索对象存储空间中的所有数据。 删除数据使用 delete() 方法从对象存储空间中删除指定键路径的数据。 关闭数据库使用 close() 方法关闭数据库连接。
需要注意的是indexedDB 使用异步 API需要使用回调函数或 Promise 处理返回结果。此外indexedDB 只能在支持该 API 的浏览器中使用需要检查浏览器是否支持 indexedDB API。
indexedDB 和 localStorage 的区别
indexedDB 和 localStorage 都是浏览器提供的客户端存储方案它们之间的区别主要有以下几点 数据存储方式localStorage 存储的是字符串类型的数据而 indexedDB 存储的是结构化数据。indexedDB 支持存储复杂的数据类型例如对象、数组等而 localStorage 只能存储字符串类型的数据。 存储容量localStorage 的存储容量通常为 5MB 左右而 indexedDB 的存储容量通常为几百 MB 或几 GB。indexedDB 可以存储大量的数据适用于需要存储大量结构化数据的应用程序。 数据检索方式indexedDB 支持基于索引的高效数据检索可以通过索引快速查询数据。而 localStorage 只能遍历整个数据集合进行数据检索效率较低。 事务支持indexedDB 支持事务操作可以确保数据的一致性和完整性。而 localStorage 不支持事务操作无法保证数据的一致性和完整性。 浏览器支持indexedDB API 在较新版本的浏览器中得到支持而 localStorage API 在大多数浏览器中都得到支持。
综上所述indexedDB 更适合存储大量结构化数据并且支持高效的数据检索和事务操作而 localStorage 更适合存储少量简单的字符串类型数据。
demo演示
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleIndexedDB/title/headbodyIndexedDB/bodyscriptconst db indexedDB.open(myDatabase, 1);let connection;db.onerror function (e) {console.log(打开数据库失败);};db.onsuccess function (e) {console.log(打开数据库成功)connection e.target.result;// connection.close();};// 当数据库version变化的时候会触发这个回调那么数据库从无到有也必然会发生版本变化所以数据库初始化的时候必然会触发一次这个函数db.onupgradeneeded function (e) {connection e.target.result;connection.createObjectStore(myObjectStore, { keyPath: id });};setTimeout(() {const transaction connection.transaction(myObjectStore, readwrite);const store transaction.objectStore(myObjectStore);// 新增// const add store.add({// id: 1,// name: pcm// });// add.onsuccess () {// console.log(add success);// };// // 更新// const update store.put({// id: 1,// name: pcs// });// update.onsuccess () {// console.log(update success);// };// 查询// const read store.get(1);// read.onsuccess () {// console.log(read success, read);// };// 删除const remove store.delete(1);remove.onsuccess () {console.log(remove);};}, 1000);/script
/html
keyPath是IndexDB中用于定义对象存储空间中每个对象的唯一键的属性。这个键可以是任何一个对象中的属性例如ID、名称或日期等。在创建对象存储空间时可以通过指定keyPath属性来定义唯一键。这样在添加、更新或删除数据时可以使用这个唯一键来引用和操作对象。 补充 不是所有数据库操作都必须通过事务来进行。事务Transaction是数据库管理系统DBMS中的一个重要概念用于确保数据库操作的一致性和完整性。事务是一系列数据库操作的单个逻辑工作单元要么全部执行成功要么全部回滚撤销以保持数据库在任何时间点都处于一致状态。
虽然事务提供了一种确保数据完整性的机制但并不是所有的数据库操作都需要使用事务。以下是一些情况 简单查询 对于只涉及到读取而不涉及写入的简单查询通常不需要使用事务。例如SELECT语句可以独立执行而不需要事务的保障。 单一操作 当某个数据库操作是独立的、不依赖其他操作的时候也可以不使用事务。例如插入一条新纪录如果这个操作不依赖于其他操作的结果可能可以不使用事务。 不需要一致性保障 在某些特定的情况下如果不需要对数据库的一致性进行强制保障那么可以选择不使用事务。这通常发生在对实时性要求较高、而一致性要求相对较低的应用中。
然而在涉及到多个数据库操作、需要一致性保障、需要保证原子性、一致性、隔离性和持久性ACID属性的情况下事务就显得尤为重要。在复杂的业务逻辑中使用事务能够确保数据库的数据始终保持在一致的状态。
参考链接https://www.yuque.com/qingfengaibiancheng/arvmg8/ga6ceg
参考链接2https://www.bilibili.com/video/BV11V4y1Z7uJ/?spm_id_from333.337.search-card.all.clickvd_source4c263677a216945c0d21ca65ee15a5f9
