什么是本地存储？如何使用它？

2025-06-10

什么是本地存储？如何使用它？

如果您需要：

  • 保存某种计数器的值，而不是每次刷新页面时都将其重置为 0
  • 将用户的 input.value 保存在某处（因为你需要）
  • 在浏览器刷新后，将动态创建的数据保留在屏幕上
  • 或类似的东西

好吧，好消息：这就是我们localStorage来这里的目的！！！🤩

让我们深入探讨

我这里将以我的待办事项列表项目为例，因为这正是我们真正需要使用 localStorage 的情况。
在待办事项应用中，用户在输入框中输入想要添加到列表中的内容，当他按下“添加”或“提交”按钮时，该内容就会添加到屏幕上。

为了实现这一点，我们使用以下方法之一来“操纵” DOM 😈：

如果您还不熟悉 DOM 操作，您可以单击其中的每一个来查看更多信息。

替代文本
凉爽的！

但有一个问题：每次刷新页面，所有东西都会消失……我们添加的项目不会在屏幕上持久化。
一旦点击浏览器的刷新按钮，列表就会变成空的。🔄 😭 我们需要解决这个问题！

替代文本

这正是localStorage发挥作用的时候！
本地存储是一种浏览器数据库，它可以将我们的数据保存为字符串（键/值对对象）。
你可以在开发者工具中看到本地存储：不要点击“控制台”😉，而是点击“应用程序”（你可能需要点击右侧的小双箭头才能访问它）。
它如下：

替代文本

这是我们可以存储数据的地方！！

方法如下。

要创建存储：
localStorage.setItem("mySuperStorage","yay!")
如果您在浏览器中打开新选项卡，请在控制台中输入该代码（+按 Enter），您将看到以下内容🤩：

替代文本

就这么简单。

要检索我们存储的数据：
localStorage.getItem("mySuperStorage")

替代文本

好的，那么这究竟是如何运作的呢？

底层：

  • localStorage 是 Window 对象的一个​​属性
  • 它永久存储数据（除非你删除它，我们将在下面看到如何删除）
  • 每个网站/域名都有一个 localStorage
  • 这意味着，如果您打开了同一个网站的多个标签，只要您在这个网站上，它就是同一个 localStorage（这很棒！）
  • 最大尺寸约为 5mb（这对于存储键/值对来说已经足够了。它们只是字符串，非常轻！）

在我们的代码中，localStorage 内置了 5 种方法。
我们经常用到的是：

  • localStorage.setItem(name, content)：setItem() 函数用于创建存储。第一个参数是存储的名称，第二个参数是存储的内容。您可以创建任意数量的存储！
  • localStorage.getItem(name)：getItem() 可让您检索存储在存储中的数据。您必须指定所需数据的名称（即您为存储指定的名称）。
  • localStorage.clear()：该clear()方法将清除存储中的所有内容。无需任何参数，快速简便！

现在让我们在我们的 TODO 应用程序示例中实现它！

我们将要：

目前，我们的 localStorage 是空的。它尚未初始化。

替代文本

1-让我们用 localStorage.setItem() 创建一个存储

const todoStorage = [];  
localStorage.setItem("TODO-app storage", JSON.stringify(todoStorage));
Enter fullscreen mode Exit fullscreen mode
  • 第一行代码：：const todoStorage = []这将创建一个空数组（它将存储用户输入的所有待办事项）
  • 现在让我们将第二行代码分成两部分：
    • localStorage.setItem("TODO-app storage",：这段代码在我们的 localStorage 中创建一个名为“TODO-app storage”的存储。
    • JSON.stringify(todoStorage)：这部分会将我们存入存储的数据转换为字符串。别忘了，在 localStorage 中，所有内容都是字符串，但在 JavaScript 代码中，数据实际上是 JSON 格式（JavaScript 对象表示法）。因此，必须将其转换为字符串才能存储在 localStorage 中。幸好，我们有一个内置JSON.stringify()方法可以做到这一点！（现在你可能会问：“那么，要从 localStorage 中检索数据，我们需要做相反的事情，对吧？把字符串转回 JSON 格式？” 是的，绝对没错！！！你猜对了！使用这个方法就可以完成JSON.parse()。我们很快就会用到它。）

此时，如果我们检查我们的 localStorage，我们会看到这个🤩： 我们的存储被称为“TODO-app 存储”，正如我们想要的那样，它是一个空数组。
替代文本
[]

2-让我们将用户添加的每个新任务存储在存储器中！

1- const todo = { task: input.value };：这是用户在输入中输入的内容，我们会将其显示在屏幕上。我们声明一个“todo”变量作为具有我们选择调用“task”属性的对象，该属性存储用户在输入中输入的值（文本）。2-
：todoStorage.push(todo);简单的数组方法push()将 todo 添加到数组 todoStorage 中，这是我们之前创建的空数组。3-
：localStorage.setItem("TODO-app storage", JSON.stringify(todoStorage));现在我们将本地存储内容设置为数组 todoStorage！
让我们将所有这些包装在一个可以称为 storeTodos() 的函数中：

function storeTodos(){
const todo  = {task: input.value};
todoStorage.push(todo);
localStorage.setItem("TODO-app storage", JSON.stringify('todoStorage'));
}
Enter fullscreen mode Exit fullscreen mode

例如，当点击提交按钮时，让我们调用该函数！
我们应该看到 localStorage 的运行！

替代文本

3- 在用户刷新浏览器甚至关闭窗口并返回后，让我们显示存储在 localStorage 中的所有待办事项！

我们将通过两个步骤来实现这一点：
1- 显示待办事项的功能：

function displayTodos() {
 const todoStorage = JSON.parse(localStorage.getItem('TODO-app storage')) || [];
 todoStorage.forEach((todo) => {
    const userItem = `<li class="my-css">
                      <i class="far fa-square"></i>                     
                      <p class="my-css">${todo.task}</p>
                      <i class="far fa-trash-alt"></i>
                     </li>`;
    document.querySelector(".todo-list").insertAdjacentHTML("beforeend", userItem);
  }
}
Enter fullscreen mode Exit fullscreen mode

此代码的快速分解：

  • JSON.parse(localStorage.getItem('TODO-app storage'))：这就是我们之前讨论过的 JSON.parse() 方法！当我们将数据保存到存储中时，我们需要 JSON.stringify()。 当我们从存储中获取数据时，我们需要 JSON.parse()。
  • ||[]：这意味着 todoStorage 要么是 todoStorage 的 JSON.parse()（这意味着它存在），要么||是一个空数组（如果尚未存储任何内容）
  • 正如您所看到的，其余部分是使用模板文字（非常方便呈现动态创建的 HTML）+ insertAdjacentHTML() 方法的 DOM 操作！
  • 这两个<i class="far fa-square"></i>图标<i class="far fa-trash-alt"></i>均来自 Fontawesome！<i>标签的意思是“图标”，用于展示 Fontawesome 库中的图标！如果您不了解 Fontawesome，请点击此处了解！

2- 在窗口中添加一个事件监听器，用于检测页面何时刷新（或关闭并重新打开）。该事件名为DOMContentLoaded事件。它也是我们可以监听的事件，就像“click”或“keydown”一样！
我们将在此时调用 displayTodos 函数：

window.addEventListener('DOMContentLoaded', displayTodos);
Enter fullscreen mode Exit fullscreen mode

替代文本
好了，就到这里！我们的 TODO 应用的用户可以刷新页面或关闭浏览器重新打开：他们的列表仍然会显示在屏幕上，就像一个真正的应用程序一样！😎

替代文本
今天关于本地存储的内容就到这里！
希望这篇文章能对你有所帮助，或者能为你的本地项目提供一些灵感/想法。

如果您希望我进一步开发任何方面，或者您有任何问题/意见/建议，请在下面的评论中告诉我。

现在，感谢您的阅读。

下一篇文章将于下周发布！🤙🏾

鏂囩珷鏉ユ簮锛�https://dev.to/nightcoder/what-is-the-local-storage-how-to-use-it-369c
Devto 翻译
PREV
网站状态检查电子表格设置
NEXT
PostgreSQL 全文搜索：综合指南 什么是全文搜索？ PostgreSQL 全文搜索 PostgreSQL 全文搜索的实际应用 总结