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

html5简单存储

admin
行业动态
2025-05-04
1

HTML5简单存储包括localStorage和sessionStorage，均以键值对形式存储数据，前者数据持久化，后者仅存会话期间，常用于保存

HTML5简单存储详解

Web Storage

HTML5引入了Web Storage API，提供两种客户端存储方式：localStorage和sessionStorage，两者均以键值对形式存储数据，区别于Cookie的特性如下：

特性	localStorage	sessionStorage	Cookie
生命周期	永久（直到手动清除）	会话级（标签页关闭即清除）	可设置过期时间
容量限制	约5MB（浏览器依赖）	约5MB（浏览器依赖）	约4KB
发送至服务器	否	否	是（每次HTTP请求自动携带）
同源限制	严格同源策略	严格同源策略	严格同源策略
典型应用场景	持久化配置、用户偏好	临时表单数据、会话状态	登录态、跟踪标识

localStorage使用方法

存储数据
```
localStorage.setItem('key', 'value'); // 字符串类型
```
注意：值会被转换为字符串，存储对象需用JSON.stringify

读取数据

const value = localStorage.getItem('key');

删除数据

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

数据持久化
数据在浏览器关闭后仍然存在，除非手动清除或用户清理缓存。

sessionStorage使用方法

存储数据

sessionStorage.setItem('tempKey', 'tempValue');

读取数据

const tempValue = sessionStorage.getItem('tempKey');

生命周期
- 标签页关闭/刷新时自动清除
- 适用于单页面应用（SPA）的临时状态管理

存储数据类型处理

操作	说明
`JSON.stringify()`	将对象/数组转换为字符串存储
`JSON.parse()`	读取字符串后还原为原始对象
`encodeURIComponent`	对特殊字符进行编码（如存储中文）
`decodeURIComponent`	解码恢复原始内容

示例：存储用户配置

// 保存配置对象
const userConfig = { theme: 'dark', fontSize: 16 };
localStorage.setItem('config', JSON.stringify(userConfig));
// 读取配置
const config = JSON.parse(localStorage.getItem('config'));

安全与限制

同源限制
只有当前域名的页面可以读写对应存储，防止跨站数据泄露。
隐私保护
- 敏感数据（如密码）不应存储
- 第三方脚本无法访问非同源存储
容量预警
超出配额时浏览器可能抛出QUOTA_EXCEEDED_ERR，建议存储前检查：
```
if (localStorage.length >= MAX_ITEMS) {
  alert('存储已满，请清理数据');
}
```

常见问题与解答

问题1：如何判断浏览器是否支持Web Storage？

解答：
可通过检测window对象的属性：

if (typeof window.localStorage !== 'undefined') {
  console.log('支持localStorage');
} else {
  console.log('不支持，需降级方案');
}

问题2：存储的数据会过期吗？

解答：

localStorage数据不会自动过期，需手动调用clear()或removeItem()。
sessionStorage在标签页关闭时自动清除。

若需实现过期机制,需自行记录时间戳并校验：

// 设置带过期时间的数据
const now = Date.now();
localStorage.setItem('token', JSON.stringify({ value: 'abc', exp: now + 3600000 }));
// 读取时校验过期
const token = JSON.parse(localStorage.getItem('token'));
if (token && token.exp > Date.now()) {
  console.log('Token有效');
} else {
  localStorage.removeItem('token');
  console.log('Token已过期');
}

本地存储