当前位置：首页 > 行业动态 > 正文

html5创建本地数据库

admin
行业动态
2025-05-04
2249

HTML5通过localStorage和IndexedDB实现本地存储，前者存简单键值，后者处理复杂结构数据。（

HTML5本地数据库

HTML5 提供了多种本地存储方案，IndexedDB 是功能最强大的本地数据库，支持存储大量结构化数据，以下是常见的本地存储方式对比：

html5创建本地数据库第1张

存储方式	数据类型	容量限制	持久性	浏览器支持
`localStorage`	键值对（字符串）	约5MB	是	所有现代浏览器
`sessionStorage`	键值对（字符串）	约5MB	否	所有现代浏览器
`IndexedDB`	对象/二进制数据	约500MB+	是	Chrome/Firefox/Edge/Safari
`WebSQL`	SQL数据库	约50MB	是	部分浏览器（已弃用）

IndexedDB 基础用法

打开数据库

通过 indexedDB.open() 方法创建或连接数据库：

const request = indexedDB.open('myDatabase', 1); // 版本号为1
request.onerror = (event) => {
  console.error('数据库打开失败:', event.target.error);
};
request.onsuccess = (event) => {
  const db = event.target.result; // 获取数据库实例
  console.log('数据库打开成功:', db);
};
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  // 创建对象仓库（类似表）
  db.createObjectStore('users', { keyPath: 'id' });
};

数据操作流程

步骤	说明
打开数据库	使用 `indexedDB.open()` 连接或创建数据库
创建对象仓库	在 `onupgradeneeded` 事件中定义数据结构（如表）
事务处理	通过 `db.transaction()` 开启事务，支持读写操作
增删改查	使用 `add()`/`put()`/`delete()`/`get()`/`getAll()` 等方法操作数据
关闭数据库	事务自动提交后，数据库连接会自动关闭

完整示例：用户信息管理

添加数据

const dbRequest = indexedDB.open('myDatabase', 1);
dbRequest.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction('users', 'readwrite'); // 开启读写事务
  const store = transaction.objectStore('users');
  // 添加数据
  store.add({ id: 1, name: 'Alice', age: 25 });
  store.add({ id: 2, name: 'Bob', age: 30 });
  transaction.oncomplete = () => {
    console.log('数据添加成功');
  };
  transaction.onerror = (event) => {
    console.error('事务错误:', event.target.error);
  };
};

查询数据

const dbRequest = indexedDB.open('myDatabase', 1);
dbRequest.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction('users', 'readonly');
  const store = transaction.objectStore('users');
  // 查询所有数据
  store.getAll().onsuccess = (event) => {
    console.log('所有用户数据:', event.target.result);
  };
};