Web Storage 是 HTML5 引入的客户端存储技术，允许网站在用户浏览器中存储键值对数据。它通过两种机制实现数据存储： localStorage（本地存储）和 sessionStorage（会话存储）。以下是详细说明：
一、核心概念
数据存储方式 - localStorage：
提供持久化存储，数据在浏览器关闭后仍可保留，类似本地小笔记本。
- sessionStorage：仅在当前浏览器会话期间有效，关闭浏览器后数据会被清除。
与 Cookies 的区别 - 存储容量：
Web Storage 可存储更大体积的数据（通常为 5MB），而 Cookies 受限于 4KB。
- 数据传输：Cookies 每次 HTTP 请求都会发送至服务器，增加网络流量；Web Storage 数据存储在客户端，减少网络传输。
- 数据生命周期：Cookies 可设置过期时间，Web Storage（除主动删除外）数据永久保存。
二、使用场景
localStorage - 保存用户偏好设置（如主题、字体）。
- 缓存频繁访问的数据（如API响应）。
- 实现跨页面会话保持（如购物车内容）。
sessionStorage
- 临时存储表单数据（如复选框状态、文本框默认值）。
- 协助多标签页共享会话数据（如在线编辑器）。
三、基本操作
设置数据
```javascript
localStorage.setItem('key', 'value'); // 持久化存储
sessionStorage.setItem('key', 'value'); // 会话级存储
```
获取数据
```javascript
const value = localStorage.getItem('key');
const value = sessionStorage.getItem('key');
```
删除数据
```javascript
localStorage.removeItem('key');
sessionStorage.removeItem('key');
```
清空存储
```javascript
localStorage.clear();
sessionStorage.clear();
```
四、注意事项
数据安全： 存储敏感信息（如密码）需加密处理，避免通过 Web Storage 传输敏感数据。 兼容性
通过合理使用 Web Storage，可提升网站性能并改善用户体验。
