上一篇： HTML5 语义元素

下一篇： HTML5 Web SQL

HTML5 Web 存储

localStorage

localStorage 是一种持久性存储，用于在用户的浏览器中长期保存数据。即使用户关闭浏览器或重新启动计算机，localStorage 中的数据仍然存在。要向localStorage 添加数据，请使用以下代码：

                localStorage.setItem("key", "value");

要从 localStorage 检索数据，请使用以下代码：

                let value = localStorage.getItem("key");

要删除 localStorage 中的单个数据项，请使用以下代码：

                localStorage.removeItem("key");

要清除所有 localStorage 数据，请使用以下代码：

                localStorage.clear();

sessionStorage

sessionStorage 是一种临时性存储，用于在用户的浏览器中保存数据，直到用户关闭当前浏览器窗口。当用户关闭窗口后，sessionStorage 中的数据将被清除。要向 sessionStorage 添加数据，请使用以下代码：

                sessionStorage.setItem("key", "value");

要从 sessionStorage 检索数据，请使用以下代码：

                let value = sessionStorage.getItem("key");

要删除 sessionStorage 中的单个数据项，请使用以下代码：

                sessionStorage.removeItem("key");

要清除所有 sessionStorage 数据，请使用以下代码：

                sessionStorage.clear();

注意事项

  • localStorage 和 sessionStorage 只能存储字符串类型的数据。如果需要存储对象或数组，可以使用 JSON.stringify() 方法将其转换为字符串，然后再存储。在检索数据时，使用 JSON.parse() 方法将字符串转换回对象或数组。
                const obj = { key: "value" };
                localStorage.setItem("object", JSON.stringify(obj));

                const retrievedObj = JSON.parse(localStorage.getItem("object"));
  • Web 存储受到同源策略的限制，不同域名、协议和端口之间的站点无法访问彼此的 Web 存储数据。
  • 每个浏览器对 Web 存储的容量限制可能有所不同。通常，每个站点的 localStorage 和 sessionStorage 容量限制为 5MB 左右。

以上就是 HTML5 Web 存储的基本用法和注意事项。通过使用 Web 存储，您可以在客户端轻松地保存和管理应用状态数据。请注意，在使用 Web 存储时确保遵守用户隐私政策，避免存储敏感信息。