HTML5代码如何管理客户端存储 HTML5代码中IndexedDB的增删改查-html教程-PHP中文网

HTML5代码如何管理客户端存储 HTML5代码中IndexedDB的增删改查

看不見的法師

发布： 2025-11-13 20:48:43

原创

600人浏览过

IndexedDB通过增删改查操作实现浏览器端大量结构化数据存储。首先打开数据库并创建对象仓库；接着使用事务添加数据；然后可按主键查询或遍历所有数据；支持获取记录后更新字段；还能根据主键删除指定数据，适用于离线应用与大数据处理场景。

html5代码如何管理客户端存储 html5代码中indexeddb的增删改查

HTML5 提供了多种客户端存储方式，其中 IndexedDB 是一种强大且灵活的低级 API，用于在用户浏览器中存储大量结构化数据，包括二进制数据（如图片、文件等）。它适合需要离线功能或处理大量数据的 Web 应用。下面介绍如何使用 IndexedDB 实现增删改查操作。

1. 打开数据库并创建对象仓库

在使用 IndexedDB 之前，必须先打开数据库并定义一个对象仓库（类似表）来存储数据。

const request = indexedDB.open('MyDatabase', 1);
let db;

request.onupgradeneeded = function(event) {
  db = event.target.result;
  // 创建名为 users 的对象仓库，主键为 id
  if (!db.objectStoreNames.contains('users')) {
    db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
  }
};

request.onsuccess = function(event) {
  db = event.target.result;
};

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

登录后复制

2. 添加数据（增）

使用事务将新记录插入到对象仓库中。

function addUser(name, email) {
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  const user = { name, email }; // id 会自动递增

  const addRequest = store.add(user);

  addRequest.onsuccess = function() {
    console.log('用户添加成功，ID:', addRequest.result);
  };

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

// 使用示例
addUser('张三', 'zhangsan@example.com');

登录后复制

3. 查询数据（查）

支持按主键查询单条数据，或遍历所有数据。

立即学习“前端免费学习笔记（深入）”；

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

查看详情

// 按 ID 查询单个用户
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 为', id, '的用户');
    }
  };
}

// 查询所有用户
function getAllUsers() {
  const transaction = db.transaction(['users'], 'readonly');
  const store = transaction.objectStore('users');
  const request = store.getAll();

  request.onsuccess = function() {
    console.log('所有用户:', request.result);
  };
}

// 使用示例
getUserById(1);
getAllUsers();

登录后复制

4. 更新数据（改）

通过主键找到记录并更新其内容。

function updateUser(id, name, email) {
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  const request = store.get(id);

  request.onsuccess = function() {
    const user = request.result;
    if (user) {
      user.name = name;
      user.email = email;
      const updateReq = store.put(user); // 保存更新
      updateReq.onsuccess = () => console.log('更新成功');
    } else {
      console.log('用户不存在');
    }
  };
}

// 使用示例
updateUser(1, '李四', 'lisi@example.com');

登录后复制

5. 删除数据（删）

根据主键删除指定记录。

function deleteUser(id) {
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  const request = store.delete(id);

  request.onsuccess = function() {
    console.log('用户删除成功');
  };

  request.onerror = function() {
    console.error('删除失败:', request.error);
  };
}

// 使用示例
deleteUser(1);

登录后复制

基本上就这些。IndexedDB 虽然 API 较为复杂，但功能强大，适用于需要持久化存储和高性能查询的场景。掌握它的基本增删改查操作是开发离线 Web 应用的重要一步。

以上就是HTML5代码如何管理客户端存储 HTML5代码中IndexedDB的增删改查的详细内容，更多请关注php中文网其它相关文章！