首页 > 文章 > 前端

JavaScriptIndexedDB入门指南

时间：2025-11-02 12:51:33 421浏览收藏

文章不知道大家是否熟悉？今天我将给大家介绍《JavaScript IndexedDB操作教程》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

IndexedDB是浏览器中用于存储大量结构化数据的本地数据库，支持异步操作，通过indexedDB.open()创建或打开数据库，并在onupgradeneeded事件中初始化对象仓库和索引；所有增删改查操作均通过事务进行，使用add、put、get、delete方法实现数据管理，结合游标遍历和索引查询可高效检索数据，需注意事务生命周期与错误处理以确保数据一致性。

JavaScript IndexedDB数据库操作

IndexedDB 是浏览器提供的本地数据库，适合存储大量结构化数据。它支持异步操作，不会阻塞页面，适用于需要离线存储或缓存大量数据的 Web 应用。

打开和初始化数据库

使用 indexedDB.open() 打开数据库，如果数据库不存在则会创建。首次打开时可通过 onupgradeneeded 事件创建对象仓库（类似表）。

const request = indexedDB.open('MyDB', 1);

request.onupgradeneeded = function(event) {

const db = event.target.result;

// 创建对象仓库，keyPath 指定主键

const objectStore = db.createObjectStore('users', { keyPath: 'id' });

// 创建索引便于按字段查询

objectStore.createIndex('email', 'email', { unique: true });

};

request.onsuccess = function(event) {

const db = event.target.result;

console.log('数据库打开成功');

};

request.onerror = function(event) {

console.error('打开失败:', event.target.error);

};

增删改查基本操作

所有操作都通过事务（transaction）进行，需指定操作的对象仓库和权限模式。

添加数据：

function addUser(db, user) {

const transaction = db.transaction(['users'], 'readwrite');

const store = transaction.objectStore('users');

const request = store.add(user);

request.onsuccess = () => console.log('添加成功');

request.onerror = () => console.error('添加失败');

}

读取数据：

function getUser(db, id) {

const transaction = db.transaction(['users'], 'readonly');

const store = transaction.objectStore('users');

const request = store.get(id);

request.onsuccess = () => {

if (request.result) {

console.log('查到用户:', request.result);

} else {

console.log('未找到');

}

};

}

更新数据：

function updateUser(db, user) {

const transaction = db.transaction(['users'], 'readwrite');

const store = transaction.objectStore('users');

store.put(user); // 主键存在则更新，否则新增

}

删除数据：

function deleteUser(db, id) {

const transaction = db.transaction(['users'], 'readwrite');

const store = transaction.objectStore('users');

store.delete(id);

}

查询与遍历数据

可使用游标（cursor）遍历所有记录，或通过索引进行条件查询。

// 遍历所有用户

function listUsers(db) {

const transaction = db.transaction(['users'], 'readonly');

const store = transaction.objectStore('users');

const request = store.openCursor();

request.onsuccess = function(event) {

const cursor = event.target.result;

if (cursor) {

console.log('用户:', cursor.value);

cursor.continue(); // 继续下一条

} else {

console.log('遍历结束');

}

};

}

// 使用索引查询

function getUserByEmail(db, 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);

}

};

}

基本上就这些。掌握 open、add、get、put、delete 和游标遍历，就能完成大多数本地数据管理任务。注意事务生命周期和错误处理，避免数据不一致。不复杂但容易忽略细节。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。