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

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. 查询数据（查）

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

MarketingBlocks AI

AI营销助理，快速创建所有的营销物料。

27 查看详情 MarketingBlocks AI

// 按 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的增删改查的详细内容，更多请关注其它相关文章！

# 是一种 # 爱站seo更新 # 餐饮最好的推广网站 # 丽水营销推广投放平台官网 # 简述网站建设运营费用 # 亚马逊如何营销推广 # 长春网站优化软件 # 湖北seo工具快速入门 # 肇庆定制型网站建设公司 # 深圳西乡整合推广营销 # 网站链接合作推广网站 # 中文网 # 相关文章 # 还能 # html5代码 # 结构化 # 适用于 # 遍历 # 客户端 # 离线 # 主键 # 持久化存储 # 浏览器端 # ai # 浏览器 # 大数据 # html5 # html

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-11-13

4008744355

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

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

2. 添加数据（增）

3. 查询数据（查）

4. 更新数据（改）

5. 删除数据（删）

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

4008744355

服务/方案/案例/支持

关于我们

Notice