我在 Vue 中构建了一个应用程序。我需要存储信息以备后用，使用js-cookie是一种好方法吗？答案

【问题标题】：I build a app in Vue. I need to store information for later use, is it a good way to use js-cookie?我在 Vue 中构建了一个应用程序。我需要存储信息以备后用，使用js-cookie是一种好方法吗？
【发布时间】：2019-08-23 03:07:51
【问题描述】：

我尝试使用 Vuex 来存储用户在我的应用程序中选择的信息，但是一旦我重新加载页面，它就消失了。然后我开始使用 Cookies、js-cookie 和它的作品完美。我觉得那肯定是坏事，如果你可以使用 cookie，为什么还要使用 vuex？我没有发现使用 cookie 有任何问题，但总感觉这一定是坏事。

当您需要收集信息并且在重新加载页面时信息不会消失时，最好采用哪种方式？

【问题讨论】：

Cookie 现在显然是邪恶的，至少根据英国的说法，所以我不会使用它们。幸运的是，我们现在有了 localStorage，我们可以使用它来代替。
好吧，你认为我应该改用 localStorage 吗？
Yuppers，一个快速的谷歌搜索出现了this 看起来应该很容易设置。

标签： javascript vue.js cookies nuxt.js js-cookie

【解决方案1】：

Vuex 是一种内存存储。一旦页面重新加载，它就会被清除。您需要更持久的存储。有几个选项，localstorage、sessionstorage、cookie 和 indexedDB。

Cookie 与您向服务器发出的每个请求一起发送。这对您或您想要的可能不是必需的。

Localstorage 应该没问题。

查看在 Vuex 和 localstorage 之间同步的 vuex-persistedstate。

https://github.com/robinvdvleuten/vuex-persistedstate

这可能就是你想要使用的。

【讨论】：

好吧，localStorage 会的，它的工作原理完全一样。我还有一个带有 firebase 的身份验证和一个在 6000 秒内过期的令牌 ID，在这种情况下使用 cookie 会更好吗？

【解决方案2】：

这是来自https://vuejs.org/v2/cookbook/client-side-storage.html 的本地存储示例。即使您关闭会话，这也会存储您的汽车名称。

    <div id="app">
      My car <input v-model="carName">
    </div>

     const app = new Vue({
      el: '#app',
      data: {
        carName: '',

      },
        mounted() {
    if (localStorage.carName) {
      this.carName = localStorage.carName;
    }
  },

      watch: {
        name(newName) {
          localStorage.carName = carName;
        }
      }
    });

【讨论】：