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

html5创建数据库

HTML5通过IndexedDB API创建本地数据库，使用 indexedDB.open()方法指定版本并配置对象存储空间，支持异步键值对存储，兼容主流浏览器

HTML5 客户端存储方案

本地存储（localStorage）

  • 特性：持久化存储，关闭浏览器后数据仍存在
  • 容量限制：约5MB
  • 数据类型：仅支持字符串类型（需手动序列化）
  • API 方法：
    • setItem(key, value)：设置键值对
    • getItem(key)：获取值
    • removeItem(key)：删除指定键值
    • clear()：清空所有数据
方法 描述 示例
setItem 存储键值对 localStorage.setItem('name','John')
getItem 读取指定键的值 localStorage.getItem('name')
removeItem 删除指定键 localStorage.removeItem('age')
clear 清空所有存储数据 localStorage.clear()

会话存储（sessionStorage）

  • 特性：临时存储，页面关闭后自动清除
  • 用途：适合存储敏感临时数据（如表单填写中转数据）
  • API 方法：与 localStorage 完全相同

IndexedDB 数据库

  • 特性：
    • 结构化数据存储
    • 支持事务操作
    • 容量上限可达数GB
    • 异步操作模式
  • 核心概念：
    • 数据库（Database）
    • 对象仓库（Object Store）
    • 事务（Transaction）
    • 游标（Cursor）
// 示例：创建并操作 IndexedDB
const request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  // 创建对象仓库，设置主键
  db.createObjectStore('users', { keyPath: 'id' });
};
request.onsuccess = (event) => {
  const db = event.target.result;
  // 添加数据
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  store.add({ id: 1, name: 'Alice' });
  // 查询数据
  const getRequest = store.get(1);
  getRequest.onsuccess = () => console.log(getRequest.result);
};

WebSQL（已废弃）

  • 状态：HTML5 规范已移除，但部分浏览器仍支持
  • 替代方案：推荐使用 IndexedDB
  • 典型用法： 
    const db = openDatabase('mydb', '1.0', 'Test DB', 2  1024  1024);
db.transaction(tx => {
tx.executeSql('CREATE TABLE IF NOT EXISTS users (id, name)');
tx.executeSql('INSERT INTO users (id, name) VALUES (1, "Bob")');
});

存储方案对比表

特性 localStorage sessionStorage IndexedDB
数据持久性 永久 会话级 永久
数据结构 键值对 键值对 对象数据库
容量限制 5MB 5MB 数GB
浏览器支持 IE8+ IE8+ IE10+
适用场景 简单配置存储 临时数据中转 复杂数据管理

常见问题解答

Q1：如何选择 localStorage 和 IndexedDB？
A1：若需存储简单键值对且数据量较小（<5MB），优先使用 localStorage；若需要管理结构化数据、执行复杂查询或存储大量数据，应选择 IndexedDB，例如用户设置、购物车等简单场景适合 localStorage，而离线应用、大数据量缓存等场景适合 IndexedDB。

html5创建数据库 第1张

Q2：如何实现 IndexedDB 数据同步？
A2：可通过以下方式实现：

  1. 使用事务的 oncomplete 事件确保操作完成
  2. 结合 window.sync 自定义同步机制
  3. 利用第三方库（如 Dexie.js）简化操作
    示例代码： 

    const syncData = (store, data) => {
const transaction = db.transaction([store.name], 'readwrite');
transaction.oncomplete = () => alert('同步完成');
transaction.objectStore(store.name).put(data
LocalWeb SQL
0

相关文章