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

html本地存储之数据库

admin
行业动态
2025-05-01
2

HTML本地存储通过LocalStorage/IndexedDB实现客户端数据持久化，前者以键值对存轻量数据，后者为结构化数据库，均依赖浏览器存储机制，无需服务器交互，适用于离线场景及前端数据缓存

HTML本地存储之数据库（IndexedDB）

什么是IndexedDB？

IndexedDB 是浏览器提供的原生数据库解决方案，用于在客户端存储大量结构化数据，它支持事务、索引、游标等特性，类似于传统关系型数据库（如 SQLite），但基于 JavaScript API 操作。

html本地存储之数据库第1张

IndexedDB 与其他本地存储的对比

特性	IndexedDB	localStorage/sessionStorage	Cookies
数据容量	无限制（通常几百MB~数GB）	约5~10MB	约4KB
数据结构	结构化（支持对象、数组等）	键值对（字符串）	键值对（字符串）
API 复杂度	复杂（异步操作，需处理事务）	简单（同步 API）	简单（同步 API）
持久化	长期存储（除非手动删除）	长期存储（除非手动删除）	会话或长期（可设置）
适用场景	复杂数据存储、离线应用	简单配置、临时数据	用户状态跟踪

IndexedDB 的核心特性

异步操作：通过 request 对象回调处理结果，避免阻塞主线程。
事务支持：支持 readonly 和 readwrite 事务，保证数据一致性。
索引机制：可为对象属性创建索引（如唯一索引、键范围查询）。
结构化克隆算法：支持存储复杂数据类型（如 Date、Array、Object）。
浏览器兼容性：现代浏览器均支持，IE10+ 及以上版本兼容。

基本操作步骤

(1) 打开数据库

const request = indexedDB.open('myDatabase', 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;
  // 创建对象仓库（表）
  const objectStore = db.createObjectStore('users', { keyPath: 'id' });
  // 创建索引
  objectStore.createIndex('name', 'name', { unique: false });
};

(2) 添加数据

const transaction = db.transaction(['users'], 'readwrite');
const objectStore = transaction.objectStore('users');
const data = { id: 1, name: 'Alice', age: 25 };
objectStore.add(data);
transaction.oncomplete = () => {
  console.log('数据添加成功');
};
transaction.onerror = (event) => {
  console.error('数据添加失败:', event.target.error);
};

(3) 查询数据

const transaction = db.transaction(['users']);
const objectStore = transaction.objectStore('users');
const request = objectStore.get(1); // 根据主键查询
request.onsuccess = (event) => {
  console.log('查询结果:', event.target.result);
};