【Web前端】解锁JavaScript中Web存储API的秘密

解锁JavaScript中Web存储API的秘密

推荐超级课程：

• 本地离线DeepSeek AI方案部署实战教程【完全版】
• Docker快速入门到精通
• Kubernetes入门到大师通关课
• AWS云服务快速入门实战

在构建前端应用程序时，直接在用户浏览器中保存数据是非常常见的。幸运的是，JavaScript提供了简单的Web存储API，使这变得容易。这些工具允许您在需要时在客户端保存和检索数据。我将在本文中分解这些API，并展示如何有效地使用它们。

您将学习

• 本地存储
• 会话存储
• Cookies
• IndexedDB

本地存储

本地存储是在浏览器端存储数据的一种非常有效且最简单的方式，它提供了各种方法来轻松地设置、检索和删除数据。这些数据没有过期时间，即使关闭浏览器也不会被删除。请看下面的例子。

JavaScript本地存储

• 要在本地存储中存储一个项目，我们有localStorage.setItem()方法，它接受两个参数，第一个是你想要存储数据的键，第二个是值。
• 要从本地存储检索数据，我们需要使用localStorage.getItem()方法，它将返回你存储的数据。
• 要从本地存储删除数据，我们有localStorage.removeItem()，它需要键来完全从本地存储中删除它们。

以下是本地存储的示例：

• 在本地存储中设置数据

// 在本地存储中设置数据  
localStorage.setItem("username", "Harendra");  
localStorage.setItem("email", "[e-mail]");

• 从本地存储获取数据

// 从本地存储获取数据  
const username = localStorage.getItem("username");  
const email = localStorage.getItem("email");  
  
console.log(username); // 输出： "Harendra"  
console.log(email);    // 输出： "[e-mail]"

• <