理解 JavaScript 中的本地存储

本地存储是一项基于浏览器的重要 API，允许开发者直接在浏览器中存储、检索和管理数据。与会话存储不同，本地存储即使在浏览器关闭后仍会保留，因此非常适合保存用户偏好设置、应用设置或任何需要在会话之间保留的数据。但需要注意的是，数据仅限于存储它的浏览器。例如，在 Chrome 中保存的数据在 Firefox 中将无法使用。

本地存储的工作原理

在使用本地存储之前，务必了解它以JSON 格式存储数据。这意味着，如果要保存 JavaScript 对象，则需要先将其转换为 JSON，然后在检索数据时将其转换回 JavaScript 对象。

以下是一个例子：

const user = {
  name: "AliceDoe"
};
const userToJSON = JSON.stringify(user); // Convert object to JSON

在浏览器中查看本地存储

您可以使用浏览器的开发者工具查看本地存储中存储的数据并进行交互。以下是快速指南：

1. 右键单击任意网页并选择“检查”或按 F12。
2. 打开应用程序选项卡。
3. 在左侧面板中，找到存储部分下的本地存储，您将看到存储的数据以键值对的形式显示。

在本地存储中创建新记录

要将数据存储在本地存储中，请按照以下步骤操作：

const user = {
  name: "AliceDoe"
};

const userToJSON = JSON.stringify(user); // Convert to JSON
localStorage.setItem("user", userToJSON); // Save the item

在此示例中：

• 关键是。​"user"
• 该值是 JSON 格式的字符串化对象。

从本地存储读取数据

从本地存储检索数据时，您需要将 JSON 字符串转换回 JavaScript 对象：

const userJSON = localStorage.getItem("user"); // Retrieve data
const userObject = JSON.parse(userJSON); // Convert back to JS object
console.log(userObject); // { name: "AliceDoe" }

更新本地存储中的现有数据

更新本地存储中的数据类似于创建新记录 - 本质上，就是覆盖旧数据：

const updatedUser = {
  name: "AliceDoe",
  age: 25
};

const updatedUserJSON = JSON.stringify(updatedUser);
localStorage.setItem("user", updatedUserJSON); // Overwrite the record

从本地存储中删除数据

最后，要从本地存储中删除记录，可以使用该removeItem方法：

localStorage.removeItem("user"); // Remove the "user" record

这将删除与“用户”键关联的记录。

结论

本地存储是一款功能强大且易于使用的 JavaScript 客户端数据持久化工具。通过了解如何创建、读取、更新和删除记录，您可以存储跨浏览器会话持久化的重要数据，从而提升用户体验。不过，同样需要注意的是，本地存储仅限于特定浏览器和域名，并且由于未加密，因此不应用于敏感数据。

通过将本地存储合并到您的应用程序中，您可以改进其功能，而无需为某些任务提供完整的后端解决方案。

引用：

• MDN Web 文档，“LocalStorage”， https: //developer.mozilla.org/en-US/docs/Web/API/Window/localStorage