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

HTML之离线存储

admin
行业动态
2025-05-06
2

HTML离线存储含LocalStorage（持久）与SessionStorage（会话），均以键值对存数据，容量约5

HTML离线存储详解

离线存储的概念

HTML离线存储是指浏览器提供的客户端数据存储机制,允许在用户本地保存数据，即使关闭页面或断开网络连接，数据仍然可被访问，主要用于减少服务器请求、提升用户体验，常见场景包括缓存用户配置、表单数据、购物车信息等。

主流离线存储方式对比

存储方式	生命周期	数据容量	数据类型	浏览器支持度
`localStorage`	长期持久（手动清除）	约5MB	字符串（需序列化）	IE8+、Chrome、Firefox等
`sessionStorage`	页面会话期间有效	约5MB	字符串（需序列化）	IE8+、Chrome、Firefox等
`IndexedDB`	长期持久（手动清除）	约500MB+	结构化数据（对象/数组）	IE10+、Chrome、Firefox等
`Cookie`	长期持久（可设置过期）	约4KB	字符串	所有浏览器

核心API用法

localStorage 和 sessionStorage

// 设置值（需转为JSON字符串）
localStorage.setItem(&#39;key', JSON.stringify({ name: 'Alice' }));
sessionStorage.setItem('token', '12345');
// 获取值（需解析JSON）
const user = JSON.parse(localStorage.getItem('key'));
console.log(user.name); // 输出: Alice
// 删除单个键值
localStorage.removeItem('key');
// 清空所有数据
localStorage.clear();

IndexedDB（异步操作）

// 打开数据库
const request = indexedDB.open('myDB', 1);
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore('users', { keyPath: 'id' }); // 创建存储对象
};
request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  store.add({ id: 1, name: 'Bob' }); // 添加数据
};

适用场景

场景	推荐存储方式	原因
用户登录状态	`localStorage`	需要跨会话持久化，但无需服务器验证。
临时表单数据	`sessionStorage`	仅当前页面有效，关闭页面后自动清除。
大量结构化数据	`IndexedDB`	支持复杂查询、事务操作，适合大数据量（如离线应用的数据缓存）。
敏感信息（如Token）	`HttpOnly Cookie`	需服务器参与，仅限HTTP请求携带，防止XSS攻击。

注意事项

浏览器兼容性
- localStorage 和 sessionStorage 在老旧浏览器（如IE7及以下）中不支持。
- IndexedDB 在移动端部分浏览器可能存在兼容性问题。
存储容量限制
- localStorage 和 sessionStorage 通常限制为5MB左右，超出会导致异常。
- IndexedDB 虽容量大，但需注意浏览器对单个数据库的大小限制（通常约100MB-500MB）。
数据同步问题
- 多标签页或窗口操作同一数据时,需通过事件监听（如storage事件）处理同步。
- IndexedDB 需显式使用事务保证数据一致性。
安全限制
- 遵循同源策略,不同域名的页面无法共享存储数据。
- 敏感数据建议加密后存储,避免XSS攻击窃取。