html5本地缓存存储数据

HTML5 本地缓存存储数据详解

localStorage

• 定义：提供持久化的键值对存储，数据保存在浏览器中,即使关闭页面或浏览器也不会丢失。
• 特点：
  • 仅支持字符串类型的数据（需手动序列化/反序列化）。
  • 同一域名下的所有页面共享数据。
  • 容量限制约为 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：
  • sessionStorage.setItem(key, value)：存储数据。
  • sessionStorage.getItem(key)：获取数据。
  • sessionStorage.removeItem(key)：删除指定键的数据。
  • sessionStorage.clear()：清空所有数据。
• 示例：

  sessionStorage.setItem('tempData', 'test');
  const data = sessionStorage.getItem('tempData'); // 返回 'test'

IndexedDB

• 定义：基于事务的低级 API，用于存储大量结构化数据（如数据库）,支持索引和复杂查询。
• 特点：
  • 支持存储二进制数据（如文件、Blob）。
  • 容量限制较大（通常数百 MB 至数 GB）。
  • 异步操作，需处理回调或 Promise。
  • 数据持久化,除非显式删除。
• 常用 API：
  • indexedDB.open(databaseName)：打开数据库。
  • transaction.objectStore(storeName)：操作对象存储（类似表）。
  • objectStore.add(data)：添加数据。
  • objectStore.get(key)：获取数据。
  • objectStore.delete(key)：删除数据。
• 示例：

  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' });
  };

对比表格

适用场景

• localStorage：长期存储配置项（如用户偏好、主题设置）。
• sessionStorage：临时存储会话数据（如表单填写中途刷新）。
• IndexedDB：大规模数据存储（如离线应用、文件缓存）。

相关问题与解答

问题 1：如何选择合适的本地存储方式？

• 解答：
  • 若需长期保存少量简单数据（如用户设置），优先使用 localStorage。
  • 若数据仅在当前会话中使用（如临时状态），选择 sessionStorage。
  • 若需存储复杂结构或大量数据（如离线应用数据库），使用 IndexedDB。
  • 避免将敏感信息（如密码）存入 localStorage,因其易被脚本读取。

问题 2：如何实现本地存储的“过期时间”功能？

• 解答：
  • localStorage 和 sessionStorage 本身不支持过期时间，需手动实现：
    1. 存储数据时，额外记录时间戳（如 { value: 'data', expire: Date.now() + 3600000 }）。
    2. 读取时检查当前时间是否超过 expire，若过期则删除数据并返回 null。
    3. 示例代码：

       function setWithExpire(key, value, ttl) {
        const data = { value, expire: Date.now() + ttl };
        localStorage.setItem(key, JSON.stringify(data));
       }
       function getWithExpire(key) {
        const json = localStorage.getItem(key);
        if (!json) return null;
        const { value, expire } = JSON.parse(json);
        if (Date.now() > expire) {
          localStorage.removeItem(key);
          return null;
        }
        return value;