html5的存储方式

HTML5 本地存储方式详解

LocalStorage（本地存储）

• 特点：
  • 数据持久化，关闭浏览器后仍保留
  • 无过期时间，需手动清除
  • 同源策略限制（协议+域名+端口）
  • 仅支持字符串存储，需序列化复杂数据类型
• 容量：5~10MB（浏览器依赖）
• 典型用途：长期保存用户偏好设置、应用配置等
• API 示例：

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

SessionStorage（会话存储）

• 特点：
  • 数据仅在页面会话期间有效（标签页关闭即清除）
  • 同源策略限制
  • 容量与 LocalStorage 类似
• 典型用途：临时保存未提交的表单数据、会话级状态
• API 示例：

  // 存储数据
  sessionStorage.setItem('tempKey', 'tempValue');
  // 读取数据
  const tempValue = sessionStorage.getItem('tempKey');

IndexedDB（索引数据库）

• 特点：
  • 轻量级关系型数据库，支持事务操作
  • 可存储大容量二进制数据（如文件、图片）
  • 异步 API，支持索引和游标查询
• 容量：50~200MB（浏览器依赖）
• 典型用途：离线应用数据存储、复杂数据结构管理
• API 示例：

  // 打开数据库
  const request = indexedDB.open('myDatabase');
  request.onsuccess = (event) => {
    const db = event.target.result;
    // 创建事务
    const transaction = db.transaction(['todos'], 'readwrite');
    // 操作对象仓库
    const objectStore = transaction.objectStore('todos');
    objectStore.add({ title: 'Task 1', done: false });
  };

Cookies（文档 cookie）

• 特点：
  • 随 HTTP 请求自动发送至服务器
  • 受域名和路径限制，可设置过期时间
  • 容量极小（约 4KB）且每次请求携带开销大
• 典型用途：用户认证标识、服务器端会话管理
• API 示例：

  // 设置 Cookie
  document.cookie = 'username=John; max-age=3600; path=/';
  // 读取 Cookie
  const cookies = document.cookie.split('; ');

FileSystem API（文件系统）

• 特点：
  • 允许直接操作本地文件系统（沙箱环境）
  • 分为临时文件（temporary）和持久文件（persistent）
  • 需用户授权且浏览器支持有限
• 典型用途：客户端文件缓存、离线文件编辑
• API 示例：

  window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
  requestFileSystem(window.TEMPORARY, 1024  1024, (fs) => {
    fs.root.getFile('example.txt', {create: true}, (fileEntry) => {
      // 读写文件操作
    });
  });

HTML5 存储方式对比表

常见问题与解答

Q1: LocalStorage 和 SessionStorage 的核心区别是什么？

A1：两者 API 完全一致，唯一区别在于生命周期，LocalStorage 数据持久化（除非手动清除），而 SessionStorage 数据在页面标签页关闭时自动销毁,适合临时数据存储。

Q2: 为什么 IndexedDB 比 LocalStorage 更适合存储大量结构化数据？

A2：IndexedDB 提供异步操作、事务支持、索引查询和二进制数据处理能力，且容量远大于 LocalStorage，存储 JSON 对象数组时，IndexedDB 可直接按字段建立索引并高效查询，而 LocalStorage