JavaScript教程：深入理解IndexedDB数据库

殷蕙予

于 2025-06-11 09:00:52 发布

阅读量420

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/gitblog_00292/article/details/148574898

JavaScript教程：深入理解IndexedDB数据库

IndexedDB是现代浏览器提供的一种强大的客户端数据库解决方案，它比localStorage更适合存储大量结构化数据。本文将全面介绍IndexedDB的核心概念和使用方法。

IndexedDB概述

IndexedDB是一种基于键值对存储的NoSQL数据库，具有以下特点：

支持存储几乎任何JavaScript数据类型
提供事务支持确保数据一致性
支持索引和范围查询
存储容量远大于localStorage
异步API设计避免阻塞UI线程

数据库操作基础

打开数据库

let openRequest = indexedDB.open(databaseName, version);

databaseName：数据库名称
version：数据库版本号（正整数）

数据库操作是异步的，需要通过事件处理结果：

let openRequest = indexedDB.open("myDB", 1);

openRequest.onerror = function(event) {
  console.error("数据库打开失败:", event.target.error);
};

openRequest.onsuccess = function(event) {
  let db = event.target.result;
  console.log("数据库打开成功");
  // 使用db对象进行后续操作
};

openRequest.onupgradeneeded = function(event) {
  // 数据库初始化或升级逻辑
  let db = event.target.result;
  if (!db.objectStoreNames.contains('books')) {
    db.createObjectStore('books', { keyPath: 'id' });
  }
};

版本管理

IndexedDB采用显式版本控制机制，当打开更高版本的数据库时会触发onupgradeneeded事件，开发者可以在这里执行数据库结构变更。

let openRequest = indexedDB.open("myDB", 2);

openRequest.onupgradeneeded = function(event) {
  let db = event.target.result;
  let oldVersion = event.oldVersion;
  
  // 从版本0升级到版本1
  if (oldVersion < 1) {
    db.createObjectStore('books', { keyPath: 'id' });
  }
  
  // 从版本1升级到版本2
  if (oldVersion < 2) {
    let store = event.target.transaction.objectStore('books');
    store.createIndex('price_idx', 'price', { unique: false });
  }
};

对象存储(表)操作

对象存储(类似关系型数据库中的表)是IndexedDB存储数据的基本单位。

创建对象存储

只能在onupgradeneeded事件中创建或修改对象存储：

let db = event.target.result;
let store = db.createObjectStore('books', {
  keyPath: 'id',       // 使用对象的id属性作为主键
  autoIncrement: true  // 自动生成递增的主键
});

创建索引

索引可以加速查询非主键字段：

store.createIndex('name_idx', 'name', { unique: false });
store.createIndex('price_idx', 'price', { unique: false });

数据操作

所有数据操作必须在事务中进行。

事务基础

// 创建只读事务
let transaction = db.transaction('books', 'readonly');
let store = transaction.objectStore('books');

// 创建读写事务
let transaction = db.transaction('books', 'readwrite');
let store = transaction.objectStore('books');

CRUD操作

增(Add):

let book = { id: 'js', name: 'JavaScript高级编程', price: 99 };
let request = store.add(book);

request.onsuccess = function() {
  console.log('添加成功');
};

request.onerror = function(event) {
  console.error('添加失败:', event.target.error);
};

查(Get):

let request = store.get('js');

request.onsuccess = function() {
  let book = request.result;
  console.log(book);
};

改(Put):

let book = { id: 'js', name: 'JavaScript权威指南', price: 109 };
let request = store.put(book);

删(Delete):

let request = store.delete('js');

批量操作

let transaction = db.transaction('books', 'readwrite');
let store = transaction.objectStore('books');

books.forEach(book => {
  store.add(book);
});

transaction.oncomplete = function() {
  console.log('所有书籍添加完成');
};

高级查询

游标查询

let request = store.openCursor();

request.onsuccess = function(event) {
  let cursor = event.target.result;
  if (cursor) {
    console.log(cursor.key, cursor.value);
    cursor.continue();
  } else {
    console.log('没有更多数据');
  }
};

范围查询

// 查询价格在50到100之间的书籍
let range = IDBKeyRange.bound(50, 100);
let request = store.index('price_idx').openCursor(range);

request.onsuccess = function(event) {
  // 处理结果
};