HTML5 Web 存储是一种在客户端以键值对的形式存储数据的机制，允许Web应用在用户的浏览器中存储和检索数据。主要有两种存储方式：Local Storage 和 Session Storage。这两种存储提供了一种比 cookies 更加灵活和高效的数据存储方式。
1. Local Storage（本地存储）
- 定义：Local Storage 允许在用户的浏览器上长时间存储数据，数据存储不随浏览器的关闭而消失。
- 存储容量：一般来说，Local Storage 的容量大约为 5-10 MB，具体取决于浏览器的实现。
- 用途：适用于存储用户的偏好设置、主题选择等数据，当用户重新访问网站时，这些数据能够持续保留。
使用方法：
// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
let value = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清空所有数据
localStorage.clear();
2. Session Storage（会话存储）
- 定义：Session Storage 用于在一个浏览器标签中存储数据，数据在窗标签或窗口关闭时被清空。
- 存储容量：与 Local Storage 类似，Session Storage 常常提供 5-10 MB 的存储空间。
- 用途：适合于存储临时数据，如表单输入状态、用户会话信息等。
使用方法：
// 存储数据
sessionStorage.setItem('key', 'value');
// 获取数据
let value = sessionStorage.getItem('key');
// 删除数据
sessionStorage.removeItem('key');
// 清空所有数据
sessionStorage.clear();
3. 区别总结
| 特性 | Local Storage | Session Storage |
|---|---|---|
| 生命周期 | 持久存储，直到手动删除 | 仅在当前会话中有效，关闭浏览器后删除 |
| 数据共享 | 共享于同源的所有窗口 | 仅在同一窗口或标签页中有效 |
| 存储大小 | 通常 5-10 MB | 通常 5-10 MB |
4. 使用注意事项
- 安全性：Web 存储不是加密的，存储在客户端的数据应该避免存储敏感信息，如密码和信用卡信息。
- 同步：在浏览器的不同标签页中，Local Storage 的变化不会实时更新，而 Session Storage 不会在不同标签页之间共享数据。
- 浏览器支持：现代浏览器（如 Chrome, Firefox, Safari, Edge）对 Web 存储的支持良好，较老的浏览器可能不支持。
5. API 支持
Web 存储提供了一些简单易用的 API，同时也支持 JSON 编码和解码，可以轻松存储和检索复杂的数据结构。
示例：存储和检索对象
// 存储对象
let user = {
name: 'Alice', age: 25 };
localStorage.setItem('user', JSON.stringify(user));
// 检索对象
let retrievedUser = JSON.parse(localStorage.getItem('user'));
console.log(retrievedUser);
总结
HTML5 Web 存储为客户端数据持久化提供了一种简洁、有效的方式，适用于存储用户特定的设置和状态，改善了用户体验。合理地使用 Local Storage 和 Session Storage 可以让Web应用更加智能和用户友好。
