当前位置：首页 > 行业动态 > 正文

html存储数据方式

HTML5支持多种数据存储方式：Cookie（4KB，随请求发送）、LocalStorage（5MB，持久化）、SessionStorage（会话级）、IndexedDB（结构化大数据），浏览器端通过API操作键值对或对象存储数据，满足不同

Cookie

Cookie 是浏览器提供的小型文本文件存储机制，用于保存键值对数据，服务器可通过响应头 Set-Cookie 设置 Cookie，客户端通过 document.cookie 访问或修改。

  • 特点：
    • 自动随请求发送到同域服务器。
    • 可设置过期时间（Expires 或 Max-Age），默认为会话级（关闭浏览器失效）。
    • 大小受限（约 4KB，含多 Cookie 总限制）。
    • 支持标记 HttpOnly（禁止 JavaScript 访问）和 Secure（仅 HTTPS 传输）。
  • 用途：用户登录状态、偏好设置、跟踪标识符。
  • 示例： 
    // 写入 Cookie
document.cookie = "name=John; expires=Thu, 01 Jan 2024 00:00:00 GMT; path=/";
// 读取 Cookie
const cookies = document.cookie.split(';').map(c => c.trim());

LocalStorage

LocalStorage 提供持久化的键值对存储，数据在浏览器关闭后仍存在。

html存储数据方式 第1张

  • 特点：
    • 容量约 5MB，远超 Cookie。
    • 数据无过期时间,需手动清除。
    • 仅同源（协议+域名+端口）页面可访问。
    • 同步 API，操作简单。
  • 用途：长期配置、用户偏好、离线数据缓存。
  • 示例： 
    // 存储数据
localStorage.setItem('key', 'value');
// 读取数据
const value = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');

SessionStorage

SessionStorage 与会话绑定，数据在页面关闭或标签页刷新时清除。

  • 特点：
    • 容量与 LocalStorage 相同（约 5MB）。
    • 数据仅在当前窗口/标签页有效。
    • 适用于临时数据存储。
  • 示例： 
    sessionStorage.setItem('temp', 'data');
const temp = sessionStorage.getItem('temp');

IndexedDB

IndexedDB 是浏览器内置的异步数据库，支持事务和索引，适合存储复杂结构化数据。

  • 特点：
    • 容量大（通常数百 MB 至数 GB）。
    • 支持对象存储（类似 NoSQL 数据库）。
    • 异步操作,需处理回调或 Promise。
    • 数据持久化,无自动过期机制。
  • 用途：离线应用、大数据量存储（如日志、文件缓存）。
  • 示例： 
    const db = new Dexie('myDatabase'); // 使用 Dexie.js 库简化操作
db.version(1).stores({ friends: '++id,name,age' });
db.friends.put({ name: 'Alice', age: 25 });

存储方式对比表

特性 Cookie LocalStorage SessionStorage IndexedDB
数据大小 4KB（单 Cookie） 5MB 5MB 数百 MB~数 GB
持久性 可设置过期时间 永久（手动清除） 会话级 永久（手动清除）
作用域 同域（跨路径/子域） 同源 同源（窗口/标签页） 同源
API 复杂度 低（字符串操作） 低 低 高（需事务/游标）
是否支持过期时间 是 否 否 否
数据类型 字符串（需编码） 字符串 字符串 对象/数组
安全性 可设置 HttpOnly 易受 XSS 攻击 易受 XSS 攻击 需自行处理加密

相关问题与解答

问题 1：如何根据场景选择客户端存储方式？

解答：

  • 短期会话数据（如表单临时填充）：使用 SessionStorage。
  • 长期配置或用户偏好（如主题设置）：使用 LocalStorage。
  • 跨会话的小数据（如登录态）：使用 Cookie（需注意大小和安全性）。
  • 复杂数据或大数据量（如离线应用数据）：使用 IndexedDB。
  • 敏感信息（如 Token）：优先 HttpOnly Cookie，或加密后存 LocalStorage。

问题 2：如何清理过期的 Web Storage 数据？

解答：
Web Storage（localStorage/sessionStorage）本身不支持过期时间，但可通过以下方式实现：

  1. 手动封装过期逻辑：存储时记录时间戳，读取时检查并删除过期数据。 
    function setItemWithExpiry(key, value, ttl) {
  const now = Date.now();
  localStorage.setItem(key, JSON.stringify({ value, expiry: now + ttl }));
}
function getItemWithExpiry(key) {
  const item = JSON.parse(localStorage.getItem(key));
  if (item && Date.now() > item.expiry) {
    localStorage.removeItem(key);
    return null;
  }
  return item ? item.value : null;
}
  2. 定期清理：在应用启动时遍历存储，删除过期项
cookie
0

相关文章