当前位置: 首页 > article >正文

浏览器内置NoSQL数据库IndexedDB

IndexedDB - 浏览器内容数据库

indexedDB 是一种浏览器内置的NoSQL数据库,它使用键值对存储数据,用于在客户端存储大量结构化数据。它支持离线应用程序和高效的数据检索,可以在 Web 应用程序中替代传统的 cookie 和 localStorage。
IndexDB是一种在浏览器中内置的NoSQL数据库,用于在客户端存储和检索数据。它提供了一种持久存储数据的方式,可以在离线状态下使用。

使用 indexedDB 需要以下步骤:

  1. 打开数据库:使用 indexedDB.open() 方法打开一个数据库,如果数据库不存在,则会创建一个新的数据库。

  2. 创建对象存储空间:使用 createObjectStore() 方法创建一个对象存储空间,用于存储数据。可以为每个对象存储空间设置一个名称和一个键路径,键路径用于指定对象存储空间中的每个对象的唯一标识符。

  3. 存储数据:使用 add() 或 put() 方法将数据存储到对象存储空间中。add() 方法用于向对象存储空间中添加新的数据,如果该数据已经存在,则会抛出错误。put() 方法用于向对象存储空间中添加或更新数据。

  4. 检索数据:使用 get() 或 getAll() 方法从对象存储空间中检索数据。get() 方法用于检索指定键路径的数据,getAll() 方法用于检索对象存储空间中的所有数据。

  5. 删除数据:使用 delete() 方法从对象存储空间中删除指定键路径的数据。

  6. 关闭数据库:使用 close() 方法关闭数据库连接。

需要注意的是,indexedDB 使用异步 API,需要使用回调函数或 Promise 处理返回结果。此外,indexedDB 只能在支持该 API 的浏览器中使用,需要检查浏览器是否支持 indexedDB API。

indexedDB 和 localStorage 的区别

indexedDB 和 localStorage 都是浏览器提供的客户端存储方案,它们之间的区别主要有以下几点:

  1. 数据存储方式:localStorage 存储的是字符串类型的数据,而 indexedDB 存储的是结构化数据。indexedDB 支持存储复杂的数据类型,例如对象、数组等,而 localStorage 只能存储字符串类型的数据。

  2. 存储容量:localStorage 的存储容量通常为 5MB 左右,而 indexedDB 的存储容量通常为几百 MB 或几 GB。indexedDB 可以存储大量的数据,适用于需要存储大量结构化数据的应用程序。

  3. 数据检索方式:indexedDB 支持基于索引的高效数据检索,可以通过索引快速查询数据。而 localStorage 只能遍历整个数据集合进行数据检索,效率较低。

  4. 事务支持:indexedDB 支持事务操作,可以确保数据的一致性和完整性。而 localStorage 不支持事务操作,无法保证数据的一致性和完整性。

  5. 浏览器支持:indexedDB API 在较新版本的浏览器中得到支持,而 localStorage API 在大多数浏览器中都得到支持。

综上所述,indexedDB 更适合存储大量结构化数据,并且支持高效的数据检索和事务操作;而 localStorage 更适合存储少量简单的字符串类型数据。

demo演示:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>IndexedDB</title>
    </head>
    <body>
        IndexedDB
    </body>
    <script>
        const 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)中的一个重要概念,用于确保数据库操作的一致性和完整性。事务是一系列数据库操作的单个逻辑工作单元,要么全部执行成功,要么全部回滚(撤销),以保持数据库在任何时间点都处于一致状态。

虽然事务提供了一种确保数据完整性的机制,但并不是所有的数据库操作都需要使用事务。以下是一些情况:

  1. 简单查询: 对于只涉及到读取而不涉及写入的简单查询,通常不需要使用事务。例如,SELECT语句可以独立执行,而不需要事务的保障。

  2. 单一操作: 当某个数据库操作是独立的、不依赖其他操作的时候,也可以不使用事务。例如,插入一条新纪录,如果这个操作不依赖于其他操作的结果,可能可以不使用事务。

  3. 不需要一致性保障: 在某些特定的情况下,如果不需要对数据库的一致性进行强制保障,那么可以选择不使用事务。这通常发生在对实时性要求较高、而一致性要求相对较低的应用中。

然而,在涉及到多个数据库操作、需要一致性保障、需要保证原子性、一致性、隔离性和持久性(ACID属性)的情况下,事务就显得尤为重要。在复杂的业务逻辑中,使用事务能够确保数据库的数据始终保持在一致的状态。

参考链接:https://www.yuque.com/qingfengaibiancheng/arvmg8/ga6ceg

参考链接2:https://www.bilibili.com/video/BV11V4y1Z7uJ/?spm_id_from=333.337.search-card.all.click&vd_source=4c263677a216945c0d21ca65ee15a5f9


http://www.kler.cn/news/134416.html

相关文章:

  • Tensorflow2.0:CNN、ResNet实现MNIST分类识别
  • 求二叉树的高度(可运行)
  • buildadmin+tp8表格操作(3)----表头上方按钮绑定事件处理,实现功能(选中或取消指定行)
  • 互联网摸鱼日报(2023-11-20)
  • wpf devexpress post 更改数据库
  • kafka分布式安装部署
  • 【微信小程序篇】- 组件
  • 算法设计与分析复习--贪心(一)
  • 特效!视频里的特效在哪制作——Adobe After Effects
  • java智慧校园信息管理系统源码带微信小程序
  • 【wp】2023第七届HECTF信息安全挑战赛 Web
  • 什么是Selenium?如何使用Selenium进行自动化测试?
  • 初刷leetcode题目(4)——数据结构与算法
  • C# Array和ArrayList有什么区别
  • WPF拖拽相关的类
  • 详解Java设计模式之职责链模式
  • S7-1200PLC 作为MODBUSTCP服务器通信(多客户端访问)
  • Web安全研究(五)
  • python中Thread实现多线程任务
  • iTerm2+oh-my-zsh搭个Mac电脑上好用好看终端
  • Zotero在word中插入参考文献
  • 队列和微服务的异步通信
  • Python选择排序和冒泡排序算法
  • linux基础:4:gdb的使用
  • 保姆级 | Nginx编译安装
  • golang学习笔记——条件表达式
  • 【Dubbo】Dubbo负载均衡实现解析
  • nodejs微信小程序-实验室上机管理系统的设计与实现-安卓-python-PHP-计算机毕业设计
  • 2023数维杯国际赛数学建模竞赛选题建议及B题思路讲解
  • Linux本地docker一键部署traefik+内网穿透工具实现远程访问Web UI管理界面