html5的存储类型

HTML5 存储类型详解

Web Storage（本地存储与会话存储）

• localStorage

  • 生命周期：数据持久化，除非手动清除或用户清理浏览器缓存。
  • 容量限制：约 5MB（不同浏览器可能略有差异）。
  • API 方法：setItem(key, value)、getItem(key)、removeItem(key)、clear()。
  • 用途：长期存储无需与服务器同步的数据（如用户偏好设置）。
  • 示例：

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

• sessionStorage

  • 生命周期：仅在页面会话期间有效（标签页关闭或刷新后清除）。
  • 容量限制：约 5MB。
  • API 方法：与 localStorage 相同。
  • 用途：临时存储会话级数据（如表单填写状态）。
  • 示例：

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

IndexedDB（索引数据库）

• 特点：
  • 结构化存储：支持对象库、索引、事务（类似 NoSQL 数据库）。
  • 容量限制：通常为 500MB~1GB（浏览器依赖）。
  • 异步操作：基于事件或 Promise 处理数据。
• 核心概念：
  • 数据库：通过 indexedDB.open(name, version) 创建或打开。
  • 对象库：类似表，需定义键范围和索引。
  • 事务：读写操作需在事务中执行（readonly 或 readwrite）。
• 示例：

  const db = indexedDB.open('myDB', 1);
  db.onupgradeneeded = (event) => {
    const db = event.target.result;
    db.createObjectStore('users', { keyPath: 'id' });
  };
  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' });
  };

Cookies（浏览器 cookie）

• 特点：
  • 生命周期：可设置过期时间（expires）或随会话结束（sessionCookie）。
  • 容量限制：每个域名约 4KB（包括所有 cookie）。
  • 自动传输：每次 HTTP 请求均携带 cookie。
• 用途：会话管理、用户身份验证（如 HttpOnly 属性）。
• 示例：

  document.cookie = 'token=abc123; expires=Tue, 31 Dec 2024 12:00:00 UTC; path=/';

存储类型对比表

相关问题与解答

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

解答：

• 生命周期：localStorage 数据持久化，即使关闭浏览器也会保留；sessionStorage 数据在页面会话结束时（如标签页关闭）自动清除。
• 用途：localStorage 适合长期存储（如用户偏好）；sessionStorage 适合临时会话数据（如未提交的表单）。

问题 2：为什么需要使用 IndexedDB 而不是 localStorage？

解答：

• 数据复杂度：IndexedDB 支持结构化数据（如对象、数组）和索引查询，适合存储大量或复杂数据（如离线应用的数据集）。
• 容量限制：IndexedDB 容量远大于 localStorage（可达数 GB），适合需要长期存储大文件的场景（如离线文档库）。
• 事务支持：IndexedDB 提供事务机制，确保数据一致性，适合多步骤操作（如批量写入）。