客户端存储

    在这个 cookbook 的条目中，我们将专注于最简单的存储机制：Local Storage。Local Storage 使用键/值对来存储数据。它仅支持存储简单的值，但也可以通过 JSON 编解码来存储复杂的数据。总的来说，Local Storage 适合存储你希望进行持久化的较小数据集，比如用户偏好设置或表单数据。更大规模和更复杂的数据则适合存储在 IndexedDB 中。

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

    这个示例中的表单字段绑定了一个叫 的值。下面是 JavaScript 代码：

    1. const app = new Vue({
    2.   el: '#app',
    3.   data: {
    4.     name: ''
    5.   },
    6.   mounted() {
    7.     if (localStorage.name) {
    8.       this.name = localStorage.name;
    9.     }
    10.   },
    11.   watch: {
    12.     name(newName) {
    13.       localStorage.name = newName;
    14.     }
    15.   }
    16. });

    请注意 mounted 和 watch 两个方法。我们使用 mounted 方法来从 localStorage 中加载数据。为了将数据写入，我们侦听 name 值的变化，并将数据实时写入。

    你可以在下面运行这个程序：

    将变化的值立即写入或许是不被推荐的。让我们来考虑一个略微进阶的示例，首先是升级后的表单。

    现在我们有了两个字段 (依然是绑定到一个 Vue 实例上)，但是多了一个可以运行 persist 方法的按钮。让我们来看 JavaScript 代码。

    1. const app = new Vue({
    2.   el: '#app',
    3.   data: {
    4.     name: '',
    5.     age: 0
    6.   },
    7.     if (localStorage.name) {
    8.       this.name = localStorage.name;
    9.     }
    10.     if (localStorage.age) {
    11.       this.age = localStorage.age;
    12.     }
    13.   },
    14.   methods: {
    15.     persist() {
    16.       localStorage.name = this.name;
    17.       localStorage.age = this.age;
    18.       console.log('now pretend I did more stuff...');
    19.     }
    20.   }
    21. })

    像之前一样，mounted 方法是用来加载持久化了的数据 (如果存在的话)。这一次，数据只会在点击按钮后才被持久化。我们也可以在数据被存储之前，对数据进行验证或转换。你也可以将日期一并存储进去来记录这些数据是何时被存储的。有了这些元数据，mounted 方法就可以通过逻辑判断来决定是否再次对数据进行存储。你可以在下面对这个版本进行尝试。

    See the Pen by Raymond Camden (@cfjedimaster) on .

    就像在前文中提到的那样，Local Storage 只适合用于存储简单的值。为了存储对象和数组这样更复杂的数据，你必须使用 JSON 来对数据进行序列化和反序列化。下面这个示例演示了对一个猫的数组进行持久化的操作 (这个数组类型不能更好了)。

    1. const app = new Vue({
    2.   el: '#app',
    3.   data: {
    4.     cats: [],
    5.     newCat: null
    6.   },
    7.   mounted() {
    8.     if (localStorage.getItem('cats')) {
    9.       try {
    10.         this.cats = JSON.parse(localStorage.getItem('cats'));
    11.       } catch(e) {
    12.       }
    13.     }
    14.   },
    15.   methods: {
    16.     addCat() {
    17.       // 确保他们输入了一些东西
    18.       if (!this.newCat) {
    19.         return;
    20.       }
    22.       this.cats.push(this.newCat);
    23.       this.newCat = '';
    24.       this.saveCats();
    25.     },
    26.     removeCat(x) {
    27.       this.cats.splice(x, 1);
    28.       this.saveCats();
    29.     },
    30.     saveCats() {
    31.       const parsed = JSON.stringify(this.cats);
    32.       localStorage.setItem('cats', parsed);
    33.     }
    34.   }
    35. })

    在这个应用中，我们转而调用 Local Storage API 而不再“直接”访问 Local Storage。这两种方法都是有效的，但是调用 API 往往是更值得推荐的方法。mounted 方法现在需要先获取数据，然后对 JSON 格式的数据进行解析。如果这里出现了任何错误，我们就认为数据已经损坏了并将它删除。 (请记住，如果你的网页应用使用了客户端存储技术，用户可以随意访问并修改这些存储的数据。)

    我们现在有三种方法可以对猫进行操作。addCat 和 removeCat 方法负责更新储存在 this.cats 中的“实时” Vue 数据。在此之后，它们通过 方法来序列化和持久化这些数据。你可以在下面体验一下这个版本：

    See the Pen localstorage, complex by Raymond Camden () on CodePen.

    尽管 Local Storage API 较为简单，但它缺少了一些在很多应用中都很有用的基本特性。下面几个插件包装了对 Local Storage 的访问并让它变得简单易用，同时加入了诸如默认值等功能。

    虽然浏览器永远不会取代服务器的持久化系统，但是通过多种方法在本地缓存数据可以让你的应用的性能得到大幅度的提升，而与 Vue.js 相结合则会让它更为强大。