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

html5的数据库

HTML5的数据库指IndexedDB，支持事务的客户端存储，用于结构化数据持久化

HTML5 客户端存储机制

LocalStorage（本地存储）

  • 特性：

    • 持久化存储（数据长期存在,除非手动清除）
    • 以键值对形式存储字符串
    • 同一源下所有窗口共享数据
    • 容量限制约5MB（不同浏览器可能有差异）

  • API 示例：

    // 存储数据
localStorage.setItem('key', 'value');
// 读取数据
const value = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清空所有数据
localStorage.clear();

SessionStorage（会话存储）

  • 特性：
    • 临时存储（页面关闭后数据消失）
    • 以键值对形式存储字符串
    • 仅当前标签页可见数据
    • 容量限制约5MB
  • 适用场景：
    • 敏感临时数据（如未提交的表单）
    • 单页应用的临时状态管理

IndexedDB（索引数据库）

  • 核心特点：

    • 结构化数据库（类似NoSQL）
    • 支持事务操作
    • 存储容量大（可达数GB）
    • 异步API

  • 基础概念：

    • database：数据库实例
    • objectStore：类似表的对象容器
    • transaction：事务控制

  • 操作流程：

    // 打开数据库
const request = indexedDB.open('myDB', 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 request = store.get(1);
  request.onsuccess = (e) => console.log(e.target.result);
};

Web SQL Database（已弃用）

  • 说明：
    • 早期HTML5规范中的SQL数据库
    • 基于SQLite的浏览器实现
    • 已被主流浏览器废弃（如Chrome自2018年起移除）
  • 替代方案：

    推荐使用IndexedDB

存储方式对比表

特性 LocalStorage SessionStorage IndexedDB
数据持久性 长期有效 会话结束失效 长期有效
数据类型 字符串 字符串 结构化数据（对象）
存储容量 ~5MB ~5MB GB级
作用域 同源所有窗口 当前标签页 同源所有窗口
API类型 同步 同步 异步
事务支持 无 无 支持

常见问题与解答

问题1：如何选择LocalStorage和IndexedDB？

解答：

  • 若需存储简单键值对且数据量较小（如用户偏好设置），优先使用LocalStorage。
  • 若需处理大量结构化数据（如离线应用的数据缓存）、需要事务支持或复杂查询，则选择IndexedDB。
  • 注意：LocalStorage数据易被XSS攻击窃取,敏感数据应加密后存储或使用IndexedDB。

问题2：IndexedDB的事务如何处理并发操作？

解答：

  • IndexedDB的事务分为readonly和readwrite模式。
  • 多个readonly事务可并行执行，readwrite事务具有排他性（同一对象库的写事务会阻塞其他事务）。
  • 典型用法：在数据读取密集的场景使用readonly事务，在数据写入/更新时使用readwrite事务并做好冲突
IndexedDBWeb Storage客户端
0

相关文章