请选择 进入手机版 | 继续访问电脑版
MSIPO技术圈 首页 IT技术 查看内容

HTML 教程:HTML5 Web 存储简介

2023-06-26

介绍:

欢迎来到我们的 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 体验。快乐编码!

相关阅读

手机版|MSIPO技术圈 皖ICP备19022944号-2

Copyright © 2023, msipo.com

返回顶部