Localstorage和sessionstorage区别

封面图 • 2025-10-26 • JavaScript

`localStorage` 和 `sessionStorage` 是浏览器中用于存储数据的两种 Web Storage API，它们都可以在客户端（浏览器）中保存键值对的数据。虽然它们的功能相似，但在**存储生命周期**和**作用域**上有明显的区别。

---

### 一、主要区别

| 特性 | `localStorage` | `sessionStorage` |
|------|----------------|------------------|
| **存储寿命** | 永久存储，除非手动清除（关闭浏览器后数据依然存在） | 会话级别，关闭页面或浏览器后数据会被清除 |
| **作用域** | 同源（协议、域名、端口相同）下共享 | 同源且同窗口（或标签页）下共享 |
| **存储大小** | 通常为 **5MB** 左右（不同浏览器可能略有差异） | 通常也是 **5MB** 左右 |
| **是否支持跨域** | 不支持跨域访问 | 不支持跨域访问 |
| **适用场景** | 需要长期保存用户偏好、登录状态等 | 临时保存页面会话信息，如表单数据、临时状态等 |

---

### 二、使用示例

#### localStorage 示例：
```javascript
// 存储数据
localStorage.setItem('username', 'JohnDoe');

// 获取数据
let username = localStorage.getItem('username');

// 删除数据
localStorage.removeItem('username');

// 清空所有数据
localStorage.clear();
```

#### sessionStorage 示例：
```javascript
// 存储数据
sessionStorage.setItem('tempData', '12345');

// 获取数据
let tempData = sessionStorage.getItem('tempData');

// 删除数据
sessionStorage.removeItem('tempData');

// 清空所有数据
sessionStorage.clear();
```

---

### 三、总结对比

| 对比项 | localStorage | sessionStorage |
|--------|--------------|----------------|
| 数据生命周期 | 永久 | 会话期间 |
| 存储范围 | 同源、跨窗口共享 | 同源、同窗口共享 |
| 是否持久化 | 是 | 否 |
| 使用场景 | 用户配置、记住我、缓存等 | 表单数据、临时状态、会话信息等 |

---

如果你需要保存用户设置并希望在多次访问时仍然保留，用 `localStorage`；如果只是临时保存当前会话的信息，比如表单填写过程中，就用 `sessionStorage`。

如需进一步了解如何处理数据类型（如对象），可以使用 `JSON.stringify()` 和 `JSON.parse()` 来序列化和反序列化数据。