html5离线存储的方式

HTML5离线存储方式详解

LocalStorage（本地存储）

• 特点：
  • 数据持久化,即使浏览器关闭后再次打开仍可读取。
  • 以键值对（Key-Value）形式存储数据，仅支持字符串类型。
  • 同一域名下的所有页面共享数据,容量约5MB。
• 适用场景：
  长期保存用户偏好设置、登录状态等无需频繁变动的数据。
• API示例：

  // 存储数据
  localStorage.setItem('username', 'John');
  // 读取数据
  console.log(localStorage.getItem('username')); // John
  // 删除数据
  localStorage.removeItem('username');

SessionStorage（会话存储）

• 特点：
  • 数据仅在浏览器标签页或窗口的会话期间有效,关闭页面后数据清除。
  • 同样以键值对形式存储,仅支持字符串类型。
  • 容量约5MB,同一标签页内的所有脚本共享数据。
• 适用场景：
  临时存储表单数据、会话级状态（如未提交的草稿）。
• API示例：

  // 存储数据
  sessionStorage.setItem('tempData', 'draft');
  // 读取数据
  console.log(sessionStorage.getItem('tempData')); // draft
  // 清空所有数据
  sessionStorage.clear();

IndexedDB（索引式数据库）

• 特点：
  • 基于事务的NoSQL数据库,支持复杂数据结构（如对象、数组）。
  • 容量大（通常数百MB至数GB），适合存储大量数据。
  • 异步操作,需通过Promise或回调处理结果。
• 适用场景：
  离线应用的数据持久化（如邮件客户端、待办事项列表）。
• API示例：

  // 打开数据库
  let db;
  const request = indexedDB.open('myDatabase', 1);
  request.onupgradeneeded = (event) => {
    db = event.target.result;
    db.createObjectStore('tasks', { keyPath: 'id' });
  };
  request.onsuccess = (event) => {
    db = event.target.result;
    // 添加数据
    const transaction = db.transaction('tasks', 'readwrite');
    const store = transaction.objectStore('tasks');
    store.add({ id: 1, content: 'Learn IndexedDB' });
    transaction.oncomplete = () => {
      console.log('Data added');
    };
  };

Cookie（文档 cookie）

• 特点：
  • 每次HTTP请求均携带,服务器和客户端均可读写。
  • 容量极小（约4KB），且受域名和路径限制。
  • 可设置过期时间,但默认随浏览器关闭失效。
• 适用场景：
  与服务器交互的认证信息（如Token），非推荐用于离线存储。
• API示例：

  // 创建Cookie
  document.cookie = 'sessionId=abc123; max-age=3600';
  // 读取Cookie
  console.log(document.cookie); // sessionId=abc123; ...

存储方式对比表

相关问题与解答

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

解答：

• 若需长期保存简单键值数据（如用户设置），优先用LocalStorage。
• 若数据仅在当前会话中使用（如临时表单），选择SessionStorage。
• 若需存储复杂结构或大量数据（如离线应用数据库），使用IndexedDB。
• Cookie因容量小且性能开销大，通常仅用于服务器交互场景。

问题2：LocalStorage的数据会过期吗？如何手动清除？

解答：

• 默认不会自动过期，除非用户主动删除或浏览器清理缓存。
• 手动清除方法：

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

• 模拟过期：可通过存储时间戳并检查有效期实现