html5存储方式

HTML5 存储方式详解

LocalStorage（本地存储）

• 用途：长期存储数据，数据不会随浏览器关闭而丢失。
• API 方法：localStorage.setItem(key, value)、localStorage.getItem(key)、localStorage.removeItem(key)、localStorage.clear()。
• 数据容量：通常为 5MB 左右（浏览器依赖）。
• 数据类型：仅支持字符串（需手动序列化/反序列化对象）。
• 示例：

  localStorage.setItem('name', 'Alice');
  const name = localStorage.getItem('name'); // "Alice"

SessionStorage（会话存储）

• 用途：临时存储数据，数据在页面或标签页关闭后清除。
• API 方法：与 localStorage 相同（setItem、getItem 等）。
• 数据容量：通常为 5MB 左右。
• 数据类型：仅支持字符串。
• 示例：

  sessionStorage.setItem('temp', 'data');
  const temp = sessionStorage.getItem('temp'); // "data"（仅当前标签页有效）

IndexedDB（索引数据库）

• 用途：存储大量结构化数据，支持复杂查询和事务。
• API 方法：通过 indexedDB.open() 创建连接，使用事务（transaction）进行读写。
• 数据容量：通常为数百 MB（浏览器依赖）。
• 数据类型：支持多种数据类型（如对象、数组），需手动序列化。
• 示例：

  const db = indexedDB.open('myDatabase');
  db.onsuccess = (event) => {
    const db = event.target.result;
    const transaction = db.transaction('store', 'readwrite');
    const store = transaction.objectStore('store');
    store.put({ id: 1, name: 'Bob' });
  };

Cookies（ cookie 存储）

• 用途：传统方式，主要用于会话管理或短期存储。
• API 方法：document.cookie 直接操作。
• 数据容量：通常为 4KB，每个域名限制。
• 数据类型：仅支持字符串，需编码（如 encodeURIComponent）。
• 有效期：可设置 expires 或 max-age，默认随会话结束。
• 示例：

  document.cookie = 'username=John; max-age=6060'; // 1小时有效期

存储方式对比表

问题与解答

问题 1：如何选择 LocalStorage、SessionStorage 或 IndexedDB？

解答：

• 若需长期保存少量简单数据（如用户偏好设置），优先用 LocalStorage。
• 若数据仅需在当前会话或标签页中使用（如表单临时数据），选择 SessionStorage。
• 若需存储大量复杂数据（如离线应用的数据库），使用 IndexedDB。
• 避免使用 Cookies 存储非敏感数据，因其每次请求均会发送且容量有限。

问题 2：IndexedDB 相比 LocalStorage 的优势是什么？

解答：

• 结构化存储：支持对象仓库（Object Store）、索引和复杂查询。
• 大数据量：容量远超 LocalStorage（适合图片、文件等）。
• 事务支持：确保数据一致性，支持回滚操作。
• 异步 API：避免阻塞主线程，适合高性能需求场景