html5存储

HTML5 存储类型与特性

localStorage（本地存储）

• 生命周期：数据持久化，即使关闭浏览器或重启设备后仍存在，除非手动清除。
• 容量：通常约 5MB（浏览器依赖，部分浏览器可能限制更低）。
• 作用域：以域名为作用域，所有同源页面共享数据。
• API 方法：
  • localStorage.setItem(key, value)：存储数据。
  • localStorage.getItem(key)：获取数据。
  • localStorage.removeItem(key)：删除指定数据。
  • localStorage.clear()：清空所有数据。
• 示例：

  localStorage.setItem('username', 'John');
  console.log(localStorage.getItem('username')); // 输出 "John"

sessionStorage（会话存储）

• 生命周期：仅在当前页面会话中有效，标签页关闭后数据消失。
• 容量：同样约 5MB，但实际受限于浏览器内存。
• 作用域：仅当前页面（或标签页）可见，其他页面无法访问。
• API 方法：与 localStorage 完全相同。
• 示例：

  sessionStorage.setItem('tempData', 'test');
  console.log(sessionStorage.getItem('tempData')); // 输出 "test"

IndexedDB（索引式数据库）

• 生命周期：持久化，支持异步操作。
• 容量：理论上可存储大量数据（数百 MB 或更多，依赖浏览器限制）。
• 作用域：同源下的所有页面共享，支持复杂查询。
• 核心概念：
  • 数据库：需显式创建（如 open 方法）。
  • 对象仓库（Object Store）：类似数据库表，存储键值对。
  • 事务（Transaction）：确保数据一致性。
• 示例：

  const db = indexedDB.open('myDatabase');
  db.onsuccess = (event) => {
    const db = event.target.result;
    const transaction = db.transaction(['users'], 'readwrite');
    const store = transaction.objectStore('users');
    store.add({ id: 1, name: 'Alice' });
  };

Web SQL Database（已弃用）

• 说明：早期 HTML5 规范中的数据库方案，但已被主流浏览器废弃（如 Chrome、Firefox）。
• 替代方案：推荐使用 IndexedDB。

存储类型对比表

适用场景建议

1. 轻量级持久化数据（如用户偏好设置）：localStorage。
2. 临时会话数据（如表单草稿）：sessionStorage。
3. 复杂数据存储（如离线应用、大量记录）：IndexedDB。
4. 兼容旧项目（需谨慎）：Web SQL Database（不推荐新项目使用）。

相关问题与解答

问题 1：如何判断浏览器是否支持 localStorage？

解答：可以通过检测 window.localStorage 是否为 undefined，并尝试读写测试数据：

try {
  if (typeof window.localStorage !== 'undefined') {
    // 测试写入（部分浏览器可能禁用）
    localStorage.setItem('test', '1');
    localStorage.removeItem('test');
    console.log('支持 localStorage');
  } else {
    console.log('不支持 localStorage');
  }
} catch (e) {
  console.log('localStorage 不可用');
}

问题 2：IndexedDB 和 localStorage 的主要区别是什么？

解答：

1. 数据结构：localStorage 仅支持字符串键值对，而 IndexedDB 支持复杂数据类型（如对象、数组）。
2. 容量：IndexedDB 设计用于存储大量数据，localStorage 容量较小。
3. API 复杂度：IndexedDB 需处理异步操作和事务，localStorage 是简单的同步 API。
4. 适用场景：IndexedDB 适合离线应用或大数据存储，localStorage 适合简单