IndexedDB

最新推荐文章于 2024-08-08 10:00:07 发布

L的博客

最新推荐文章于 2024-08-08 10:00:07 发布

阅读量353

点赞数

分类专栏：浏览器本地存储

本文链接：https://blog.csdn.net/weixin_42194517/article/details/103859379

版权

本文介绍了IndexedDB，一种由浏览器提供的本地数据库，适用于存储大量结构化数据。IndexedDB支持键值对存储，提供事务处理确保数据一致性，其API主要为异步操作。此外，文章详细阐述了数据库、对象仓库、索引、事务等核心概念，并给出了一个简单的使用示例。

摘要由CSDN通过智能技术生成

一. 前言

IndexedDB 是由浏览器提供的 (window.indexedDB) 本地数据库,由网页脚本 (JS) 创建和操控。Web Storage(localStorage) 只能存储少量的数据。如果本地需要存储较大且较复杂的数据,Web Storage 就不够用了。因此,当我们需要在本地存储数据量较大且数据较复杂时,可以使用 IndexedDB.IndexedDB 不仅可以存储大量的结构化数据,它还提供了索引来实现对数据的高性能搜索。

二. 基本概念

1. IndexedDB 使用 key-value 键值对储存数据。value 数据可以是结构复杂的对象,key 可以是对象自身的属性.可以通过对对象中的任何属性创建索引来实现查询和列举排序。

2. IndexedDB 是事务型数据库.所有的操作都发生在事务中。如果一个事务(一系列操作数据库的代码)一旦发生错误,数据库就会回滚到事务发生前的状态,也就避免了只修改一部分数据的情况发生。

3. IndexedDB API 基本上是异步的。IndexedDB API不通过 return 语句返回数据,而是需要你提供一个回调函数来接收数据。

当你需要对数据库进行某些操作(如存储或读取)时,可以通过调用 IndexedDB API,向数据库发送一个操作请求,操作完成后,数据库会通过你提供的回调函数返回结果给你。

4. IndexedDB 是面向对象的。IndexedDB 要求你为一种数据(JS对象)创建一个对象仓库,可以将对象仓库看作是关系型数据库中表。注意:IndexedDB 不是关系型数据库,不支持 SQL 查询语句。

5. IndexedDB 遵循同源(域名+协议+端口)策略。在同一个"源"中的数据库是唯一的.每个域名可以创建多个数据库。

三. IndexedDB API

1. IDBFactory 接口(工厂),window.indexedDB 对象实现了该接口,通过该对象(不是直接使用IDBFactory接口)来打开/创建和删除一个数据库。

2. IDBDatabase 接口(数据库),该接口提供了一个数据库连接,通过连接可以创建/删除对象仓库、关闭数据库连接,以及获取指定对象仓库的事务对象。

3. IDBObjectStore 接口(对象仓库),存储对象的,每个对象可以看做是一条数据记录,类似于关系型数据库的表格。

4. IDBIndex 接口(索引),通过创建索引可以搜索任意字段,否则只能搜索默认字段(主键)。

5. IDBTransaction 接口(事务),所有的读取和写入数据均在事务中完成.事务对象提供error、abort和complete三个事件用来监听操作结果。

6. IDBRequest 接口(操作请求),所有的异步方法返回一个request对象.如果request对象成功执行了,结果可以通过result属性访问到,并且该request对象上会触发success事件。

如果操作中有错误发生,一个error事件会触发,并且会通过result属性抛出一个异常。

7. IDBCursor 接口(游标),用于遍历或迭代数据库中多个记录。

8. IDBKeyRange 接口(键范围),根据键范围限定数据记录的范围,从 IDBObjectStore 和 IDBIndex 对象中检索记录。

四. 小例子

以下是自己写的小例子，有注释。。。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>

</body>
<script>
    if (!window.indexedDB) {