教你怎么玩indexedDB浏览器数据库，执行流程以及常见错误等等

最新推荐文章于 2025-03-21 14:04:46 发布

mister.奎

最新推荐文章于 2025-03-21 14:04:46 发布

阅读量4.6k

点赞数 3

分类专栏： javascript 文章标签： indexedDB 前端数据库

本文链接：https://blog.csdn.net/qq_40959677/article/details/94352144

版权

（小编最近在研究indexedDB数据库，在网上看的文档都有些不好理解，像小编这个接触过mySql，Oracle，SQL Server的人看了都是云里雾里的，所以决定自己写一篇关于indexedDB是数据库的博文出来帮助小白更直白的了解,转载请注明出处，谢谢）

那么先给大家上一张图让大家看看数据表的结构在这里插入图片描述

为什么要使用indexedDB浏览器数据库？
随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。
通俗地说**，IndexedDB 就是浏览器提供的本地数据库**，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。
IndexedDB 具有以下特点。
（1）键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

（2）异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

（3）支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

（4）同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

（5）储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

（6）支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

接下来我们就来看看这个高大上nb带闪电的玩意怎么玩

如何使用？
首先，创建打开数据库

// indexedDB浏览器数据库是挂载在window上的，在其数据库对象上有一个open方法
/**
 * open方法接收两个参数，第一个参数字符数是数据库名，第二个参数为数据库版本号
 * open方法可以用来打开数据库也可以用来创建数据库，只传一个数据库名的时候，如果数据库名已存在默认打开当前版本数据库，如果不存在则会新建一个
 * 数据库，第二个参数是版本号，不传的时候打开默认是当前版本，创建默认是1
 * 返回一个当前数据库的IDBOpenDBRequest对象(小编理解就是当前数据库的一个对象实例),这个实例自带了一些事件
 * 常用的有
 * error =》数据库打开失败
 * onsuccess =》数据库打开成功（就可以通过其result属性拿到数据库对象了）
 * upgradeneeded =》数据库升级事件，如果指定的版本号大于当前数据库版本号就会发生数据库升级事件，这个时候则需要使用事件对象的event.taget.result拿到数据库实例
 *
 * 如果是新建数据库，由于数据库的从无到有属于版本升级，所以会先触发request的onupgradeneeded事件然后再触发其onsuccess事件
 *
 */
var request=window.indexedDB.open("dataNames");
//如果要删除数据库：indexDB.deleteDatabase('数据库名');

这样我们就在window上创建了一个浏览器数据库了，库名叫做“dataNames”，既然创建了数据库，那么就要建表了，这个window.indexedDB.open(“dataNames”);方法创建数据库的时候会返回一个对象，这个对象上有三个事件在这里插入图片描述
数据库打开成功和失败事件大家都好理解，那么这个数据库版本升级事件是个什么鬼？这个事件就是我们创建数据表的地方了，数据库版本升级是啥意思呢？我们使用 var request=window.indexedDB.open(“dataNames”);方法时如果第二个参数也就是版本号参数大于当前数据版本号就会发生数据库版本升级事件，否则就只会触发数据库打开成功或者失败事件而不会触发版本升级事件
那么，直接上创建表的代码

// 数据库版本升级事件
request.onupgradeneeded=function (ev) {
     
    //拿到数据库实例对象，其中包含了对数据库表的的创建编辑等功能
    db=ev.target.result;
    var objectStore;
    //判断我们要创建的person表是否已经存在，数据库实例的objectStoreNames中放的是我们的所有表的集合
    //contain方法查看数据库表集合中是否存在某种表
    if (!db.objectStoreNames.contains('person1')) {
     
        //使用数据库实例的createObjectStore方法创建对象仓库(其实就是数据表),第一个参数字符串就是数据表名，第二个表示
        //设置这个表中的id为主键(主键是唯一的，方便迅速索引查找)
        objectStore = db.createObjectStore('person1', {
      keyPath: 'id' });
        //使用createIndex为这个数据表添加索引（其实就是列名），三个参数分别是：列名，列名所在属性，配置对象(是否包含重复的值)
        objectStore.createIndex('name', 'name', {
      unique: false });
        objectStore.createIndex('email', 'email', {
      unique: true });
    }
};

这就创建出来一张名为person1的表了，设置了这个表的id列为主键列，为其增加了一个name列和一个email列
那么有了表了接下来就为给表添加数据了，window.indexedDB.open(“dataNames”);方法创建数据库的时候会先触发onupgradeneeded事件然后触发onsuccess数据库打开成功事件

 // 数据库打开(已有就打开，没有就创建后打开)成功事件
request.onsuccess=function (ev) {
     
    //拿到数据库实例对象，其中包含了对数据库表的的创建编辑等功能
    db=ev.target.result;
    console.log(db);
    //调用add方法向我们创建的数据库表中添加数
    add()

最低0.47元/天解锁文章