JavaScriptIndexedDB入门指南

**JavaScript IndexedDB 使用教程：前端数据存储的强大方案** IndexedDB是浏览器提供的强大客户端存储方案，尤其适用于需要存储大量结构化数据的复杂前端应用。它超越了localStorage的限制，支持异步操作、事务处理和索引查询，能有效管理包括二进制内容在内的大量数据。本教程将引导你从创建数据库连接开始，详细讲解如何使用`indexedDB.open()`创建或打开数据库，并在`onupgradeneeded`事件中定义对象仓库和索引。掌握如何通过事务进行数据的增删改查，利用`add()`/`put()`添加或更新数据，`get()`读取数据，以及`delete()`删除数据。同时，深入了解如何利用索引进行高效查询，提升数据检索速度。最后，还将探讨如何结合Promise封装IndexedDB API，提升其易用性，让前端离线应用开发更加高效便捷。

IndexedDB是浏览器中用于存储大量结构化数据的客户端方案，支持异步操作、事务处理和索引查询。通过indexedDB.open()创建或打开数据库，在onupgradeneeded中定义对象仓库和索引。使用transaction进行读写操作，add()/put()添加或更新数据，get()读取，delete()删除，可通过索引高效查询。结合Promise封装可提升API易用性，适用于复杂前端离线应用。

IndexedDB 是浏览器提供的一种强大客户端存储方案，适合存储大量结构化数据，包括二进制内容。相比 localStorage，它支持异步操作、索引查询和事务处理，更适合复杂应用的数据管理。

创建数据库连接与初始化

使用 IndexedDB 第一步是打开或创建一个数据库。通过 indexedDB.open() 方法触发连接请求，若数据库不存在则自动创建。

let db; const request = indexedDB.open("MyAppDB", 1);

request.onupgradeneeded = function(event) { db = event.target.result; if (!db.objectStoreNames.contains("users")) { const objectStore = db.createObjectStore("users", { keyPath: "id", autoIncrement: true }); objectStore.createIndex("email", "email", { unique: true }); } }; request.onsuccess = function(event) { db = event.target.result; }; request.onerror = function(event) { console.error("无法打开数据库"); };

说明： onupgradeneeded 在数据库首次创建或版本更新时触发，用于定义对象仓库（object store）和索引。

添加与读取数据

在获取数据库实例后，可通过事务进行数据的增删改查操作。写入数据使用 object store 的 add() 或 put() 方法。

function addUser(name, email) { const transaction = db.transaction(["users"], "readwrite"); const store = transaction.objectStore("users"); const user = { name, email }; const request = store.add(user); request.onsuccess = () => console.log("用户添加成功"); request.onerror = () => console.error("添加失败"); }

function getUserById(id) { const transaction = db.transaction(["users"], "readonly"); const store = transaction.objectStore("users"); const request = store.get(id); request.onsuccess = function() { if (request.result) { console.log("找到用户:", request.result); } else { console.log("未找到该ID用户"); } }; }

使用索引进行高效查询

当数据量较大时，通过索引可以快速定位记录，避免全表扫描。

function getUserByEmail(email) { const transaction = db.transaction(["users"], "readonly"); const store = transaction.objectStore("users"); const index = store.index("email"); const request = index.get(email); request.onsuccess = () => { if (request.result) { console.log("通过邮箱找到用户:", request.result); } }; }

注意： 索引需在 onupgradeneeded 中预先创建，否则无法使用。

更新与删除数据

更新数据使用 put() 方法，传入已有主键的对象即可覆盖原记录；删除使用 delete() 方法。

// 更新用户 function updateUser(id, newName) { const transaction = db.transaction(["users"], "readwrite"); const store = transaction.objectStore("users"); const getRequest = store.get(id); getRequest.onsuccess = function() { const user = getRequest.result; user.name = newName; store.put(user); }; } // 删除用户 function deleteUser(id) { const transaction = db.transaction(["users"], "readwrite"); const store = transaction.objectStore("users"); store.delete(id); }

基本上就这些。掌握连接管理、事务使用和索引查询，就能在前端实现较复杂的离线数据操作。虽然 API 略显繁琐，但结合 Promise 封装后可大幅提升可用性。

文中关于索引,事务,异步操作,IndexedDB,客户端存储的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScriptIndexedDB入门指南》文章吧，也可关注golang学习网公众号了解相关技术文章。