HTML 教程：HTML5 Web 存储简介

介绍：

欢迎来到我们的 HTML 教程的第 9 部分！在本文中，我们将探讨 HTML5 Web 存储，这是一项强大的功能，允许 Web 应用程序在用户设备上本地存储数据。借助 Web 存储，您可以跨会话保存数据、增强用户体验并构建响应式 Web 应用程序。让我们深入 HTML5 Web 存储的世界！

什么是 HTML5 网络存储？

HTML5 Web 存储为 Web 应用程序提供了一种在用户设备上本地存储数据的方法。它由两种机制组成：localStorage和sessionStorage。两种机制都存储键值对，但它们在持久性和范围方面有所不同。

本地存储：

localStorage 机制允许您存储即使关闭并重新打开浏览器也能保留的数据。存储在 localStorage 中的数据始终可用，直到被 Web 应用程序明确删除或被用户清除为止。

例子：

// Storing data in localStorage
localStorage.setItem("username", "John");
localStorage.setItem("theme", "dark");

// Retrieving data from localStorage
var username = localStorage.getItem("username");
var theme = localStorage.getItem("theme");

console.log("Username: " + username);
console.log("Theme: " + theme);

// Removing data from localStorage
localStorage.removeItem("username");

在上面的示例中，我们将用户名和主题存储在 localStorage 中。然后我们可以使用 getItem() 检索值并使用removeItem() 删除用户名。

会话存储：

sessionStorage 机制允许您存储仅在当前浏览器会话中可用的数据。当浏览器会话结束或关闭时，存储在 sessionStorage 中的数据将被清除。

例子：

// Storing data in sessionStorage
sessionStorage.setItem("token", "abcd1234");
sessionStorage.setItem("isLoggedIn", "true");

// Retrieving data from sessionStorage
var token = sessionStorage.getItem("token");
var isLoggedIn = sessionStorage.getItem("isLoggedIn");

console.log("Token: " + token);
console.log("Is Logged In: " + isLoggedIn);

// Removing data from sessionStorage
sessionStorage.removeItem("token");

在上面的示例中，我们将身份验证令牌和登录状态存储在 sessionStorage 中。然后我们可以使用 getItem() 检索值并使用removeItem() 删除令牌。

限制和注意事项：

• localStorage 和 sessionStorage 都有最大存储限制，通常每个源大约 5MB。

• Web 存储中存储的数据特定于来源（即域、协议和端口）。来自一个来源的数据无法被另一来源访问。

• 存储在 Web Storage 中的数据可供在同一源中运行的 JavaScript 访问，因此在存储敏感信息时要小心。

使用对象：

Web Storage 仅支持存储字符串格式的数据。如果要存储对象或数组等复杂数据结构，则需要在存储时使用 JSON.stringify() 将它们转换为字符串格式，在检索时使用 JSON.parse() 将它们转换为字符串格式。

例子：

var user = {
    name: "John",
    age: 30
};

localStorage.setItem("user", JSON.stringify(user));

var storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // Output: John

在上面的示例中，我们使用 JSON.stringify() 将用户对象转换为字符串，然后将其存储到 localStorage 中。检索时，我们使用 JSON.parse() 解析存储的值，将其转换回对象。

结束：

HTML5 Web 存储提供了一种在 Web 应用程序中本地存储数据的便捷高效的方法。在本教程中，我们探索了 localStorage 和 sessionStorage 机制，了解了如何存储、检索和删除数据，并考虑了使用 Web 存储时的限制和最佳实践。通过利用 Web 存储，您可以为用户创建响应灵敏且个性化的 Web 体验。快乐编码！