# 本地存储简介

URL: https://caijiao.org/html/11-html5/04-storage
Source: docs/html/11-html5/04-storage.md
Description: HTML5 本地存储（LocalStorage 和 SessionStorage）允许网页在用户浏览器中保存数据，实现离线访问和状态保持，增强用户体验。

本地存储是 HTML5 引入的一种在用户浏览器中保存数据的技术，主要包括 **LocalStorage** 和 **SessionStorage** 两种方式。相比传统的 Cookie，本地存储容量更大且操作更方便。

## LocalStorage

- 数据永久存储，除非手动清除，否则数据一直保留。
- 用于保存需要长期保存的数据，如用户偏好设置、登录状态等。

```javascript
// 存储数据
localStorage.setItem("username", "张三");

// 读取数据
const user = localStorage.getItem("username");

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

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

## SessionStorage

- 数据仅在当前会话有效，关闭浏览器或标签页后数据会被清除。
- 适合存储临时数据，如页面状态、临时表单数据。

```javascript
// 存储数据
sessionStorage.setItem("token", "abc123");

// 读取数据
const token = sessionStorage.getItem("token");
```

## 特点比较

| 存储方式       | 生命周期               | 存储容量 | 典型用途             |
| -------------- | ---------------------- | -------- | -------------------- |
| LocalStorage   | 永久（除非清除）       | 约 5MB   | 用户设置、登录状态等 |
| SessionStorage | 当前会话（标签页关闭） | 约 5MB   | 临时数据、页面状态   |

## 使用场景

- 记住用户登录信息
- 保存用户个性化设置
- 缓存部分数据减少服务器请求
- 实现离线访问功能

## 小结

本地存储提供了更大容量和更简单的 API 来保存客户端数据，是现代 Web 应用提升性能和用户体验的重要手段。