html5的离线存储有哪些

HTML5 离线存储详解

localStorage

• 特点：
  • 数据持久化，即使关闭浏览器或重启设备，数据仍存在（除非手动清除）。
  • 仅支持字符串类型的键值对存储，需手动序列化复杂数据（如 JSON）。
  • 容量限制约为 5MB（不同浏览器可能有差异）。
  • 同源策略：仅当前域名下可访问数据。
• 典型用途：
  存储长期配置（如用户偏好、主题设置）。
• API 示例：

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

sessionStorage

• 特点：
  • 数据仅在当前页面会话中存活，标签页关闭后数据消失。
  • 容量、API 与 localStorage 完全一致。
• 典型用途：
  临时存储表单数据、会话状态（如未提交的草稿）。

IndexedDB

• 特点：
  • 支持复杂数据结构（如对象、数组），内置事务和索引机制。
  • 容量大（通常可达 数百 MB，取决于浏览器）。
  • 异步 API，需通过事件或 Promise 处理结果。
  • 支持创建多个数据库和对象仓库（类似 NoSQL 数据库）。
• 典型用途：
  存储大量结构化数据（如离线应用的缓存、日志、用户生成内容）。
• API 示例：

  // 打开数据库
  const db = new Dexie('myDatabase');
  // 定义对象仓库
  db.version(1).stores({
    friends: '++id,name,age'
  });
  // 添加数据
  db.friends.put({name: 'Alice', age: 25});
  // 查询数据
  db.friends.where('age').above(20).toArray().then(result => {
    console.log(result);
  });

存储方式对比表

相关问题与解答

问题 1：localStorage 和 sessionStorage 的核心区别是什么？

解答：

• localStorage 的数据持久化，即使关闭浏览器或重启设备后仍存在；
• sessionStorage 的数据仅在当前页面会话（标签页）中有效，关闭标签页后数据自动清除。
• 共同点：均以键值对形式存储字符串，容量限制相近,且遵循同源策略。

问题 2：为什么需要 IndexedDB，而非只用 localStorage？

解答：

• 数据复杂度：IndexedDB 支持存储结构化数据（如对象、数组），而 localStorage 仅支持字符串。
• 容量：IndexedDB 容量远大于 localStorage（数百 MB vs. ~5MB）。
• 性能：IndexedDB 提供索引和事务机制，适合高频读写和复杂查询；localStorage 仅适合简单键值存储。
• 适用场景：IndexedDB 用于离线应用、大量数据缓存（如 PDF 文件、消息记录），而 localStorage 适合轻