HTML5核心特性-第6章-6.1-localStorage与sessionStorage
# HTML5核心特性-第6章-6.1-localStorage与sessionStorage
## 一、核心概念与应用场景
`localStorage`和`sessionStorage`是HTML5提供的客户端存储方案，用于在浏览器中保存键值对数据，替代传统Cookie的局限性（存储容量小、每次请求携带）。两者均遵循**同源策略**（仅同一协议、域名、端口下可访问），但在存储周期和作用域上存在关键差异：
| **特性** | `localStorage` | `sessionStorage` |
|------------------|------------------------------|--------------------------------|
| **存储周期** | 永久存储（除非手动删除） | 仅当前会话（标签页关闭后清除） |
| **作用域** | 同源所有标签页共享 | 仅当前标签页私有 |
| **存储容量** | 约5MB | 约5MB |
| **数据类型** | 仅支持字符串（需手动序列化） | 仅支持字符串（需手动序列化） |
**典型应用场景**：
- `localStorage`：保存用户偏好设置（如主题、字体大小）、离线数据缓存。
- `sessionStorage`：临时存储表单数据（如多步骤表单）、会话令牌（登录状态）。
## 二、语法与核心API
### 2.1 基础操作方法
| **API** | **作用** | **示例** |
|-------------------------|-----------------------------------|-------------------------------------------|
| `setItem(key, value)` | 存储数据（覆盖已有键） | `localStorage.setItem('theme', 'dark')` |
| `getItem(key)` | 获取数据（不存在返回`null`） | `const theme = localStorage.getItem('theme')` |
| `removeItem(key)` | 删除指定键数据 | `localStorage.removeItem('theme')` |
| `clear()` | 清空所有存储数据 | `sessionStorage.clear()` |
| `key(index)` | 获取指定索引的键名 | `const firstKey = localStorage.key(0)` |
### 2.2 数据类型处理
由于存储数据**仅支持字符串**，非字符串类型（对象、数组等）需通过`JSON`序列化/反序列化：
#### 存储对象/数组：
```javascript
// 存储用户信息对象
const user = { name: '张三', age: 25, isVIP: true };
localStorage.setItem('user', JSON.stringify(user)); // 序列化
// 读取并解析
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // 输出："张三"
```
#### 存储数字/布尔值：
```javascript
// 存储数字（自动转为字符串）
localStorage.setItem('score', 95);
console.log(typeof localStorage.getItem('score')); // 输出："string"
// 读取时需手动转换类型
const score = Number(localStorage.getItem('score'));
```
## 三、实战示例
### 3.1 保存用户主题偏好
```html
主题切换示例
// 页面加载时读取保存的主题
window.onload = () => {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.body.className = savedTheme;
}
};
// 切换主题并保存
function switchTheme(theme) {
document.body.className = theme;
localStorage.setItem('theme', theme); // 持久化保存
}
```
### 3.2 临时存储表单数据（sessionStorage）
```html
function saveStep1() {
const form = document.getElementById('step1');
const formData = new FormData(form);
const userData = { username: formData.get('username') };
// 临时存储到sessionStorage
sessionStorage.setItem('step1Data', JSON.stringify(userData));
window.location.href = 'step2.html'; // 跳转至第二步
}
// 读取第一步数据
const step1Data = JSON.parse(sessionStorage.getItem('step1Data'));
console.log('第一步用户名：', step1Data.username);
```
## 四、注意事项与兼容性
### 4.1 常见问题与解决方案
1. **数据类型丢失**
- ❌ 错误：直接存储对象 `localStorage.setItem('user', {name: '张三'})`（结果为 `"[object Object]"`）
- ✅ 正确：使用 `JSON.stringify()` 和 `JSON.parse()` 处理非字符串数据。
2. **存储容量限制**
- 单条数据过大或总容量超过5MB时会抛出错误，建议：
- 拆分大型数据为多条存储；
- 敏感/大量数据使用服务器存储（如数据库）。
3. **隐私模式限制**
- 部分浏览器在隐私模式下禁用`localStorage`，需添加异常处理：
```javascript
try {
localStorage.setItem('test', '1');
} catch (e) {
console.error('存储失败：', e.message); // 如"QuotaExceededError"
}
```
### 4.2 浏览器兼容性
- **支持情况**：所有现代浏览器（Chrome 4+、Firefox 3.5+、Edge 12+、Safari 4+）
- **IE兼容性**：IE8及以上支持，但需注意：
- IE8/9不支持`localStorage.clear()`清空单个键，需遍历删除；
- 不支持`JSON.parse()`解析复杂对象（需引入`json2.js` polyfill）。
## 五、自测题
1. 以下关于`localStorage`和`sessionStorage`的说法错误的是：
A. 两者均遵循同源策略
B. `sessionStorage`在新标签页中可共享数据
C. 存储数据均需手动序列化对象
2. 如何实现`localStorage`中存储数组并读取？
```javascript
// 存储数组
const arr = [1, 2, 3];
_______________________;
// 读取数组
const savedArr = _______________________;
```
3. 简述使用`localStorage`保存用户登录状态的风险及改进方案。
**答案**：
1. B（`sessionStorage`仅当前标签页私有，新标签页无法共享）
2. `localStorage.setItem('arr', JSON.stringify(arr))`；`JSON.parse(localStorage.getItem('arr'))`
3. 风险：数据永久存储易被盗取；改进：存储加密令牌+定期刷新，敏感操作需重新验证。
2 分钟阅读
262 字
×
微信扫一扫分享
打开微信扫一扫，分享文章给朋友
如果文章对您有帮助，欢迎支持作者继续创作
