HTML5 网络存储

在本教程中，您将学习如何使用 HTML5 网络存储功能在用户浏览器上存储数据。

什么是网络存储？

HTML5 的网络存储功能可以让您将一些信息本地存储在用户的计算机上，类似于 cookie，但它比 cookie 更快更好。 然而，网络存储并不比 cookie 更安全。 请查看 PHP cookie 的教程以了解有关 cookie 的更多信息。

存储在 Web 存储中的信息不会发送到 Web 服务器，而 cookie 则在每次请求时将数据发送到服务器。 此外，cookie 允许您存储少量数据（近 4KB），而网络存储允许您存储多达 5MB 的数据。

有两种类型的 Web 存储，它们的范围和生命周期不同：

• 本地存储 — 本地存储使用 localStorage 对象为您的整个网站永久地存储数据。 这意味着存储的本地数据将在第二天、下周或明年可用，除非您将其删除。
• 会话存储 — 会话存储使用 sessionStorage 对象为单个浏览器窗口或选项卡临时存储数据。 当会话结束时数据消失，即当用户关闭该浏览器窗口或选项卡时。

本地存储对象

如前所述，localStorage 对象存储没有过期日期的数据。 每条数据都存储在一个键/值对中。 键标识信息的名称（例如"first_name"），值是与该键关联的值（例如"Peter"）。 这是一个例子：

<script>
// 检查 localStorage 对象是否存在
if(localStorage) {
    // 存储数据
    localStorage.setItem("first_name", "Peter");
    
    // 检索数据
    alert("Hi, " + localStorage.getItem("first_name"));
} else {
    alert("Sorry, your browser do not support local storage.");
}
</script>

示例说明：

上面的 JavaScript 代码有以下含义：

• localStorage.setItem(key, value) 存储与键关联的值。
• localStorage.getItem(key) 检索与键关联的值。

您还可以通过将键名称传递给 removeItem() 方法，例如 localStorage.removeItem("first_name") 从存储中删除特定项目（如果存在）。

但是，如果要删除完整的存储，请使用 clear() 方法，例如 localStorage.clear()。 clear() 方法不带任何参数，只是一次从 localStorage 中清除所有键/值对，因此在使用它之前请仔细考虑。

sessionStorage 对象

sessionStorage 对象的工作方式与 localStorage 相同，不同之处在于它仅存储一个会话的数据，即数据一直保留到用户关闭该窗口或选项卡。

让我们试试下面的例子来了解它的基本工作原理：

<script>
// 检查 sessionStorage 对象是否存在
if(sessionStorage) {
    // 存储数据
    sessionStorage.setItem("last_name", "Parker");
    
    // 检索数据
    alert("Hi, " + localStorage.getItem("first_name") + " " + sessionStorage.getItem("last_name"));
} else {
    alert("Sorry, your browser do not support session storage.");
}
</script>