Vue 中快速使用 LocalStorage

localStorage 在创建应用程序、扩展、文档和各种用例的体验方面，可以成为一个非常有用的工具。 我本人在每个方面都使用过它！ 在存储用户一些不需要永久保留的小数据时，localStorage 是我们的好帮手。 让我们将 localStorage 与 Vue 配合使用，我个人觉得它是一种很棒且易于阅读的开发体验。

简化示例

我最近教了一门前端大师课程，我们用 Nuxt 从头到尾构建了一个应用程序。 我一直在寻找一种方法，让我们可以将构建应用程序的方式分解成更小的部分，并随着我们的进行逐一检查，因为我们需要涵盖很多内容。 localStorage 是一个解决方案，因为每个人都在个人跟踪自己的进度，而且我不需要将所有这些信息存储在 AWS 或 Azure 之类的服务中。

这是我们最终要构建的东西，一个简单的待办事项列表

存储数据

我们首先建立我们需要的用于所有元素的数据，这些元素可能是我们想要检查的，以及一个用于用户将要检查的任何内容的空数组。

export default {
  data() {
    return {
      checked: [],
      todos: [
        "Set up nuxt.config.js",
        "Create Pages",
        // ...
        ]
     }
   }
}

我们还将在模板标签中将其输出到页面

  <div id="app">
    <fieldset>
      <legend>
        What we're building
      </legend>
      <div v-for="todo in todos" :key="todo">
        <input
          type="checkbox"
          name="todo"
          :id="todo"
          :value="todo"
          v-model="checked"
        />
       <label :for="todo">{{ todo }}</label>
     </div>
   </fieldset>
 </div>

挂载和监视

目前，我们正在响应 UI 的更改，但还没有将它们存储在任何地方。 为了存储它们，我们需要告诉 localStorage，“嘿，我们有兴趣与你合作。” 然后，我们还需要挂钩到 Vue 的响应性来更新这些更改。 组件挂载后，我们将使用 mounted 钩子来选择待办事项列表中的已选中项目，然后将它们解析为 JSON，以便我们能够将数据存储在 localStorage 中

mounted() {
  this.checked = JSON.parse(localStorage.getItem("checked")) || []
}

现在，我们将监视 checked 属性的更改，如果任何内容调整，我们也将更新 localStorage！

watch: {
  checked(newValue, oldValue) {
    localStorage.setItem("checked", JSON.stringify(newValue));
  }
}

就是这样！

实际上，对于这个示例，我们只需要这些。 这仅仅展示了一个很小的用例，但你可以想象我们可以如何使用 localStorage 为网络上的许多高性能和个性化体验！