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

最新推荐文章于 2025-06-04 23:51:56 发布

翟舟琴Jacob

最新推荐文章于 2025-06-04 23:51:56 发布

阅读量227

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00329/article/details/148416671

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

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info

IndexedDB是浏览器内置的强大数据库系统，相比localStorage提供了更丰富的功能和更大的存储容量。本文将全面介绍IndexedDB的核心概念和使用方法。

IndexedDB核心特性

IndexedDB具有以下显著特点：

键值存储：支持多种键类型，可存储几乎任何JavaScript值
事务支持：保证数据操作的原子性和一致性
索引查询：支持基于键的范围查询和索引查询
大容量存储：比localStorage能存储更多数据
异步操作：所有操作都是异步的，不会阻塞UI线程

数据库操作基础

打开数据库

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

databaseName：数据库名称，同一源下的不同页面可以共享
version：正整数版本号，默认为1

版本升级机制

IndexedDB采用版本控制策略管理数据库结构变更：

openRequest.onupgradeneeded = function(event) {
  let db = event.target.result;
  // 检查当前版本并执行相应升级
  switch(event.oldVersion) {
    case 0: // 初始化数据库
      db.createObjectStore('books', {keyPath: 'id'});
      break;
    case 1:
      // 从版本1升级到版本2
      break;
  }
};

删除数据库

let deleteRequest = indexedDB.deleteDatabase('myDB');
deleteRequest.onsuccess = function() {
  console.log('数据库已删除');
};

对象库管理

对象库(类似SQL中的表)是存储数据的基本单元：

创建对象库

db.createObjectStore(name, {
  keyPath: 'id', // 使用对象的id属性作为键
  autoIncrement: true // 自动生成递增键
});

删除对象库

db.deleteObjectStore('books');

事务处理

所有数据操作必须在事务中执行：

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

// 添加数据
books.add({id: 'js', title: 'JavaScript指南'});

事务类型：

readonly：只读事务(默认)
readwrite：读写事务
versionchange：结构变更事务(自动创建)

数据操作API

添加数据

let request = store.add(value, key); // key可选
request.onsuccess = function() {
  console.log('数据添加成功');
};

读取数据

let request = store.get(key);
request.onsuccess = function() {
  let data = request.result;
};

更新数据

let request = store.put(value, key); // 存在则更新，不存在则添加

删除数据

let request = store.delete(key);

高级查询技术

键范围查询

// 获取id在'css'到'html'之间的所有书籍
let range = IDBKeyRange.bound('css', 'html');
let request = store.getAll(range);

使用索引查询

// 创建价格索引
store.createIndex('price_idx', 'price', {unique: false});

// 使用索引查询价格<=5的书籍
let priceIndex = store.index('price_idx');
let request = priceIndex.getAll(IDBKeyRange.upperBound(5));

游标遍历

对于大数据集，使用游标可以节省内存：

let request = store.openCursor();
request.onsuccess = function() {
  let cursor = request.result;
  if (cursor) {
    console.log(cursor.key, cursor.value);
    cursor.continue();
  }
};

错误处理策略

事务错误处理

transaction.onerror = function(event) {
  console.log('事务错误:', event.target.error);
};

请求错误处理

request.onerror = function(event) {
  if (request.error.name === 'ConstraintError') {
    // 处理特定错误
    event.preventDefault(); // 阻止事务中止
  }
};

Promise封装实践

使用Promise包装IndexedDB可以简化异步代码：

async function addBook(db, book) {
  const tx = db.transaction('books', 'readwrite');
  const store = tx.objectStore('books');
  try {
    await store.add(book);
    await tx.complete;
    console.log('书籍添加成功');
  } catch (error) {
    console.log('添加失败:', error);
  }
}