了解 JavaScript 中的本地存储和会话存储

JavaScript 中的本地存储和会话存储

Web 存储 API，包括 本地存储 和 会话存储，提供了一种在用户浏览器中存储键值对的简单方法。它们是 HTML5 Web 存储规范的一部分，用于在客户端 Web 应用程序中保存数据。

---

1.本地存储

• 存储数据无过期时间。
• 即使关闭并重新打开浏览器，数据仍然存在。

主要特点：

• 最大存储空间：每个域 ~5MB（因浏览器而异）。
• 同步API（大数据可能会阻塞主线程）。
• 只能从同一来源访问。

常见用例：

• 存储用户偏好（例如主题、语言）。
• 保留购物车数据。

示例：

存储数据:

localStorage.setItem("username", "JohnDoe");

检索数据:

const username = localStorage.getItem("username");
console.log(username); // Output: JohnDoe

删除数据:

localStorage.removeItem("username");

清除所有数据:

localStorage.clear();

---

2.会话存储

• 仅存储当前会话的数据。
关闭浏览器选项卡或窗口时数据将被清除。

主要特点：

最大存储空间：每个域 ~5MB（因浏览器而异）。
同步API。
只能从相同的源和浏览器会话访问。

常见用例：

存储临时数据（例如，导航期间的表单输入）。
跟踪特定于会话的偏好。

示例：

存储数据:

sessionStorage.setItem("isLoggedIn", "true");

检索数据:

const isLoggedIn = sessionStorage.getItem("isLoggedIn");
console.log(isLoggedIn); // Output: true

删除数据:

sessionStorage.removeItem("isLoggedIn");

清除所有数据:

sessionStorage.clear();

---

3.本地存储和会话存储之间的区别

功能 本地存储 会话存储 标题>

数据寿命

Feature	Local Storage	Session Storage
Data Lifespan	Persistent	Cleared after session
Storage Size	~5MB	~5MB
Scope	Same-origin policy	Same-origin and session
Use Case	Long-term storage	Temporary/session storage

持续 会话后清除 存储大小 ~5MB ~5MB 范围 同源策略 同源和会话 用例 长期存储 临时/会话存储 表>

---

4.存储复杂数据

本地存储和会话存储都将数据存储为字符串。要存储对象等复杂数据，必须使用 JSON.stringify() 和 JSON.parse()。

示例：

localStorage.setItem("username", "JohnDoe");

---

5.最佳实践

1. 避免存储敏感数据：

   • 数据以纯文本形式存储，可以通过同一域上的 JavaScript 访问。
   • 对敏感数据使用安全方法（例如仅 HTTP 的 cookie）。

2. 检查浏览器支持：

   • 确保用户的浏览器支持本地存储和会话存储：

const username = localStorage.getItem("username");
console.log(username); // Output: JohnDoe

1. 限制数据大小:

   • 仅存储必要的数据以避免性能问题。

2. 明智地使用钥匙：

   • 使用唯一键来防止与第三方库发生冲突。

3. 监控存储使用情况:

   • 检查可用空间以避免超出存储限制。

---

6.以编程方式清除存储

示例：

localStorage.removeItem("username");

---

7.调试和管理存储

大多数现代浏览器都提供开发人员工具来检查本地存储和会话存储。

步骤：

1. 打开开发者工具（F12 或右键单击 > 检查）。
2. 导航到“应用程序”选项卡。
3. 在“存储”下，查看“本地存储”和“会话存储”。

---

8.总结

功能 本地存储 会话存储 标题>

Feature	Local Storage	Session Storage
Persistent Storage	Yes	No
Accessible via JS	Yes	Yes
Data Scope	Origin	Origin Session

持久存储 是 否

可通过 JS 访问

是 是

数据范围

来源 原始会话 表>
本地存储和会话存储是客户端数据管理的必备工​​具。了解何时使用每种最佳实践以及以下最佳实践可确保 Web 应用程序的安全高效实施。

嗨，我是 Abhay Singh Kathayat！ 我是一名全栈开发人员，拥有前端和后端技术方面的专业知识。我使用各种编程语言和框架来构建高效、可扩展且用户友好的应用程序。 请随时通过我的商务电子邮件与我联系：kaashshorts28@gmail.com。

以上是了解 JavaScript 中的本地存储和会话存储的详细内容。更多信息请关注PHP中文网其他相关文章！