html5存储类型有哪些

HTML5 存储类型详解

LocalStorage（本地存储）

• 特点：
  • 数据持久化,即使关闭浏览器或重启计算机，数据仍然存在。
  • 以键值对（Key-Value）形式存储，仅支持字符串类型。
  • 同一域名下的所有页面共享数据。
  • 容量较大（通常约5MB，具体浏览器实现可能不同）。
• 适用场景：长期保存用户偏好、配置信息等。
• 示例：

  localStorage.setItem('name', 'Alice');
  console.log(localStorage.getItem('name')); // 输出 "Alice"

SessionStorage（会话存储）

• 特点：
  • 数据仅在页面会话期间有效,标签页关闭后数据被清除。
  • 以键值对形式存储,仅支持字符串类型。
  • 同一标签页内的所有脚本共享数据。
  • 容量与LocalStorage类似。
• 适用场景：临时存储单次会话数据（如表单填写状态）。
• 示例：

  sessionStorage.setItem('temp', 'data');
  console.log(sessionStorage.getItem('temp')); // 输出 "data"

IndexedDB（索引数据库）

• 特点：
  • 支持复杂数据结构（如对象、数组），可存储大量数据（通常数百MB）。
  • 基于事务的异步操作,适合处理大规模数据。
  • 数据持久化,需手动删除。
  • 支持索引和游标查询,类似小型数据库。
• 适用场景：离线应用、复杂数据管理（如聊天记录、文件缓存）。
• 示例：

  let db;
  const request = indexedDB.open('myDB', 1);
  request.onupgradeneeded = (event) => {
    db = event.target.result;
    db.createObjectStore('users', { keyPath: 'id' });
  };
  request.onsuccess = (event) => {
    db = event.target.result;
    const transaction = db.transaction('users', 'readwrite');
    const store = transaction.objectStore('users');
    store.add({ id: 1, name: 'Bob' });
  };

Cookie（文档 cookie）

• 特点：
  • 数据随HTTP请求自动发送到服务器。
  • 容量小（每个Cookie约4KB，总数量受限）。
  • 可设置过期时间、路径、域名等属性。
  • 仅支持字符串类型,需手动编码复杂数据。
• 适用场景：用户身份验证、会话跟踪。
• 示例：

  document.cookie = 'token=abc123; max-age=3600';
  console.log(document.cookie); // 输出 "token=abc123"

存储类型对比表

相关问题与解答

问题1：如何选择合适的存储类型？

• 解答：
  • 短期临时数据：使用 SessionStorage（如未提交的表单数据）。
  • 长期配置数据：使用 LocalStorage（如用户主题设置）。
  • 复杂或大量数据：选择 IndexedDB（如离线应用的数据存储）。
  • 需与服务器交互的数据：使用 Cookie（如登录态跟踪）。

问题2：如何清除浏览器中的存储数据？

• 解答：
  • LocalStorage/SessionStorage：

    localStorage.clear(); // 清空所有数据
    sessionStorage.removeItem('key'); // 删除指定键

  • IndexedDB：
    需通过删除数据库或删除特定对象存储（需手动操作）。
  • Cookie：

    document.cookie = 'token=; max-age=0'; // 删除指定Cookie