28. HTML5 Web 存储

HTML5 Web 存储 (Web Storage) API 提供了一种机制，允许浏览器在客户端安全地存储键值对数据，它比使用 Cookie 更加简单、直观，并且拥有更大的存储容量。

Web 存储分为两种主要类型：

• localStorage: 永久性存储。数据会一直保留，即使用户关闭了浏览器或重启了电脑，数据依然存在，直到被明确地删除。数据在同一浏览器的所有同源（同协议、同域名、同端口）窗口和标签页之间是共享的。
• sessionStorage: 会话级存储。数据仅在当前浏览器会话期间有效。当用户关闭了创建该数据的标签页或浏览器窗口后，数据就会被删除。

Web 存储的优势

• 更大的容量: 通常提供至少 5MB 的存储空间，远大于 Cookie 的 4KB。
• 更安全: 数据不会像 Cookie 那样在每次 HTTP 请求时都被发送到服务器，减少了不必要的数据传输和安全风险。
• 更简单的 API: 提供了一套非常简单的 setItem, getItem, removeItem 方法。

使用 localStorage

localStorage 对象用于存储没有过期时间的数据。

存储数据 setItem()

// 存储一个键为 "lastname"，值为 "Smith" 的数据
localStorage.setItem("lastname", "Smith");

// 也可以像操作普通对象一样直接赋值
localStorage.username = "John";

读取数据 getItem()

// 读取键为 "lastname" 的数据
var lastName = localStorage.getItem("lastname");
console.log(lastName); // 输出: "Smith"

// 直接访问属性
console.log(localStorage.username); // 输出: "John"

删除数据 removeItem()

// 删除键为 "lastname" 的数据
localStorage.removeItem("lastname");

清空所有数据 clear()

localStorage.clear();

注意: Web 存储只能存储字符串。如果你想存储一个 JavaScript 对象，你需要先用 JSON.stringify() 将其转换为 JSON 字符串，读取时再用 JSON.parse() 将其解析回来。

const user = { name: 'Alice', age: 30 };

// 存储
localStorage.setItem('user', JSON.stringify(user));

// 读取
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // 输出: Alice

使用 sessionStorage

sessionStorage 对象的 API 与 localStorage 完全相同，唯一的区别在于其生命周期。

// 存储数据到当前会话
sessionStorage.setItem("session_id", "12345");

// 从当前会话读取数据
var sessionId = sessionStorage.getItem("session_id");

当你关闭这个浏览器标签页后，session_id 这个数据就会被自动清除。而 localStorage 中的数据则会保留下来。