客户端存储

基本示例

客户端存储是快速提高应用程序性能的绝佳方法。通过将数据存储在浏览器本身，您可以跳过每次用户需要数据时从服务器获取信息。虽然在离线时特别有用，但即使在线用户也会从使用本地数据而不是远程服务器中受益。客户端存储可以使用 cookie、本地存储（技术上称为“Web 存储”）、IndexedDB 和 WebSQL（一种不应在新的项目中使用的已弃用方法）。

在本菜谱条目中，我们将重点介绍本地存储，它是存储机制中最简单的。本地存储使用键值系统来存储数据。它仅限于存储简单的值，但如果您愿意使用 JSON 对值进行编码和解码，则可以存储复杂数据。通常，本地存储适用于您想要持久化的小型数据集，例如用户偏好或表单数据。具有更复杂存储需求的更大数据通常最好存储在 IndexedDB 中。

让我们从一个简单的基于表单的示例开始

<div id="app">
  My name is <input v-model="name">
</div>

此示例有一个绑定到名为 name 的 Vue 值的表单字段。以下是 JavaScript 代码

const app = new Vue({
  el: '#app',
  data: {
    name: ''
  },
  mounted() {
    if (localStorage.name) {
      this.name = localStorage.name;
    }
  },
  watch: {
    name(newName) {
      localStorage.name = newName;
    }
  }
});

重点关注 mounted 和 watch 部分。我们使用 mounted 来处理从 localStorage 加载值。为了处理数据写入，我们观察 name 值，并在更改时立即写入它。

您可以在此处自己运行它

查看 CodePen 上 Raymond Camden (@cfjedimaster) 的 测试本地存储。

顺便说一句，这些开发者工具还为您提供了一种删除存储值的方法。这在测试时非常有用。

立即写入值可能不可取。让我们考虑一个稍微高级的示例。首先，更新后的表单。

<div id="app">
  <p>
    My name is <input v-model="name">
    and I am <input v-model="age"> years old.
  </p>
  <p>
    <button @click="persist">Save</button>
  </p>
</div>

现在我们有两个字段（同样，绑定到 Vue 实例），但现在还添加了一个运行 persist 方法的按钮。让我们看一下 JavaScript 代码。

const app = new Vue({
  el: '#app',
  data: {
    name: '',
    age: 0
  },
  mounted() {
    if (localStorage.name) {
      this.name = localStorage.name;
    }
    if (localStorage.age) {
      this.age = localStorage.age;
    }
  },
  methods: {
    persist() {
      localStorage.name = this.name;
      localStorage.age = this.age;
      console.log('now pretend I did more stuff...');
    }
  }
})

与之前一样，mounted 用于加载持久化数据（如果存在）。但是，这次只有在单击按钮时才会持久化数据。我们也可以在这里进行任何验证或转换，然后再存储值。您还可以存储一个表示值存储时间的日期。使用这些元数据，mounted 方法可以对是否再次存储值进行逻辑调用。您可以在下面尝试此版本。

查看 CodePen 上 Raymond Camden (@cfjedimaster) 的 测试本地存储 2。

处理复杂值

如上所述，本地存储仅适用于简单值。要存储更复杂的值，例如对象或数组，您必须使用 JSON 对值进行序列化和反序列化。以下是一个更高级的示例，它持久化了一个猫数组（最好的数组类型）。

<div id="app">
  <h2>Cats</h2>
  <div v-for="(cat, n) in cats">
    <p>
      <span class="cat">{{ cat }}</span>
      <button @click="removeCat(n)">Remove</button>
    </p>
  </div>

  <p>
    <input v-model="newCat">
    <button @click="addCat">Add Cat</button>
  </p>
</div>

此“应用程序”包含一个简单的顶部列表（带有删除猫的按钮）和一个底部的小表单，用于添加新猫。现在让我们看一下 JavaScript 代码。

const app = new Vue({
  el: '#app',
  data: {
    cats: [],
    newCat: null
  },
  mounted() {
    if (localStorage.getItem('cats')) {
      try {
        this.cats = JSON.parse(localStorage.getItem('cats'));
      } catch(e) {
        localStorage.removeItem('cats');
      }
    }
  },
  methods: {
    addCat() {
      // ensure they actually typed something
      if (!this.newCat) {
        return;
      }

      this.cats.push(this.newCat);
      this.newCat = '';
      this.saveCats();
    },
    removeCat(x) {
      this.cats.splice(x, 1);
      this.saveCats();
    },
    saveCats() {
      const parsed = JSON.stringify(this.cats);
      localStorage.setItem('cats', parsed);
    }
  }
})

在此应用程序中，我们已切换为使用本地存储 API 而不是“直接”访问。两者都有效，但 API 方法通常更受欢迎。mounted 现在必须获取值并解析 JSON 值。如果这里出现任何错误，我们假设数据已损坏并将其删除。（请记住，无论何时您的 Web 应用程序使用客户端存储，用户都可以访问它并随意修改它。）

我们现在有三种方法来处理猫。addCat 和 removeCat 都处理更新存储在 this.cats 中的“实时”Vue 数据。然后，它们运行 saveCats，它处理序列化和持久化数据。您可以在下面玩这个版本

查看 CodePen 上 Raymond Camden (@cfjedimaster) 的 本地存储，复杂。

替代模式

虽然本地存储 API 相对简单，但它缺少许多应用程序中会很有用的某些基本功能。以下插件包装了本地存储访问，使其更易于使用，同时还添加了默认值等功能。

• vue-local-storage
• vue-reactive-storage
• vue2-storage

总结

虽然浏览器永远无法取代服务器持久化系统，但拥有多种在本地缓存数据的方法可以极大地提高应用程序的性能，并且在 Vue.js 中使用它使其更加强大。