html5浏览器存储数据

HTML5浏览器存储数据详解

LocalStorage

• 定义：提供持久化的键值对存储，数据在浏览器关闭后仍存在,除非手动清除。
• API：
  • localStorage.setItem(key, value)：存储数据。
  • localStorage.getItem(key)：获取数据。
  • localStorage.removeItem(key)：删除指定数据。
  • localStorage.clear()：清空所有数据。
• 特点：
  • 容量约5MB（不同浏览器可能有差异）。
  • 仅支持字符串存储，需手动序列化/反序列化对象。
  • 数据与域名绑定,不同域名互不干扰。
• 示例：

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

SessionStorage

• 定义：会话级存储,数据在页面标签页关闭后自动清除。
• API：与localStorage完全相同（setItem/getItem等）。
• 特点：
  • 容量与localStorage相近。
  • 适用于临时数据（如表单缓存）。
  • 数据仅在当前页面会话中有效,标签页之间隔离。
• 示例：

  sessionStorage.setItem('temp', 'data');

IndexedDB

• 定义：基于事务的异步数据库，支持复杂数据结构（如对象、二进制数据）。
• API：
  • 通过indexedDB.open(databaseName)创建或连接数据库。
  • 使用transaction进行读写操作。
  • 支持objectStore类似表的结构。
• 特点：
  • 容量大（通常数百MB至数GB）。
  • 支持索引、游标、键范围查询。
  • 异步操作,避免阻塞主线程。
• 示例：

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

Cookies

• 定义：小型文本文件，随HTTP请求发送到服务器,常用于会话管理。
• API：
  • document.cookie = 'key=value; expires=Date; path=/'：设置Cookie。
  • document.cookie：获取所有Cookie字符串。
• 特点：
  • 容量极小（约4KB）。
  • 每次请求自动携带,可能影响性能。
  • 可设置Secure、HttpOnly等属性增强安全性。
• 示例：

  document.cookie = 'sessionId=abc123; max-age=3600';

存储方式对比表

数据安全与隐私

1. XSS攻击风险：存储数据可能被反面脚本读取，敏感信息（如Token）需加密。
2. HttpOnly Cookie：防止JavaScript访问Cookie,降低XSS风险。
3. Scope隔离：不同域名/协议的存储空间独立,避免数据泄露。

相关问题与解答

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

解答：

• 优先localStorage：存储简单配置或长期数据（如用户偏好）。
• 使用sessionStorage：临时数据（如未提交的表单）。
• 选择IndexedDB：需要存储大量或结构化数据（如离线应用、文件缓存）。

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

解答：

• localStorage.clear()和sessionStorage.clear()可清空对应存储。
• IndexedDB需删除数据库：

  indexedDB.deleteDatabase('dbName');

• Cookies需遍历并删除：

  document.cookie.split(';').forEach(cookie => {
    document.cookie = cookie.trim().replace(/^[^=]+(=)[^;]/, '$1'));
  });