html5存储数据的变量

HTML5 存储数据的变量详解

localStorage

• 定义：浏览器提供的本地存储机制，数据持久化存储，除非手动清除或用户清除浏览器缓存。
• 特点：
  • 数据在浏览器关闭后仍然存在。
  • 以键值对（Key-Value）形式存储。
  • 同一源（协议+域名+端口）下的所有页面共享数据。
  • 容量限制约为 5MB（不同浏览器可能有差异）。
• API 方法：
  • localStorage.setItem(key, value)：存储数据。
  • localStorage.getItem(key)：获取数据。
  • localStorage.removeItem(key)：删除指定键的数据。
  • localStorage.clear()：清空所有数据。
• 示例：

  localStorage.setItem('username', 'John');
  const name = localStorage.getItem('username'); // 返回 'John'

sessionStorage

• 定义：会话级存储，数据仅在当前页面会话中有效，标签页关闭后数据消失。
• 特点：
  • 数据生命周期与页面标签页绑定。
  • 容量限制与 localStorage 相同（约 5MB）。
  • 适用于临时数据存储（如表单临时保存）。
• API 方法：与 localStorage 完全一致。
• 示例：

  sessionStorage.setItem('tempData', 'test');

IndexedDB

• 定义：浏览器内置的 NoSQL 数据库，支持复杂数据存储（如二进制数据、结构化数据）。
• 特点：
  • 支持事务操作（ACID 特性）。
  • 容量上限高（通常数百 MB 至数 GB）。
  • 异步 API，适合存储大量数据。
  • 需手动管理数据库和对象仓库（Object Store）。
• API 方法：
  • 创建/打开数据库：indexedDB.open('dbName')。
  • 事务操作：transaction.objectStore('storeName').add(data)。
• 示例：

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

Cookie

• 定义：早期 Web 存储机制，由服务器设置，浏览器自动发送给服务器。
• 特点：
  • 每次 HTTP 请求都会携带 Cookie。
  • 容量限制小（约 4KB）。
  • 可设置过期时间、路径、域名等属性。
  • 常用于会话管理或用户偏好设置。
• API 方法：
  • document.cookie = 'key=value; expires=Date'：设置 Cookie。
  • document.cookie.split('; ')：获取所有 Cookie。
• 示例：

  document.cookie = 'token=abc123; max-age=3600'; // 1小时后过期

存储方式对比表

相关问题与解答

问题 1：如何选择 localStorage、sessionStorage 和 IndexedDB？

解答：

• 若需要长期保存数据（如用户偏好设置），选择 localStorage。
• 若数据仅需当前会话临时使用（如未提交的表单），选择 sessionStorage。
• 若需要存储大量或复杂结构数据（如文件、关系型数据），选择 IndexedDB。

问题 2：如何清理 localStorage 中过期的数据？

解答：
localStorage 本身不支持自动过期，需手动管理，常见方案：

1. 存储时间戳：保存数据时记录时间，读取时检查是否超时。

   const saveData = (key, value, ttl) => {
     const data = { value, expire: Date.now() + ttl };
     localStorage.setItem(key, JSON.stringify(data));
   };
   const getData = (key) => {
     const data = JSON.parse(localStorage.getItem(key));
     return data && data.expire > Date.now() ? data.value : null;
   };

2. 定期清理：在应用启动时遍历 localStorage，删除过期键