vue 这么向浏览器本地缓存存数据

Vue 可以通过使用浏览器的本地存储（localStorage 或 sessionStorage）来存储数据。

在 Vue 中使用本地存储可以使用以下两种方式：

1. 使用 Vue 插件 vue-ls（Vue.js LocalStorage 插件）来处理本地存储。

2. 直接使用浏览器的本地存储 API。

下面是使用浏览器的本地存储 API 保存数据的示例代码：

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

在 Vue 中可以将这些操作封装成一个全局的插件，并提供相应的 API 接口，以方便在组件中调用。

下面是一个简单的 Vue 插件示例，用于在浏览器的本地存储中保存和获取数据：

// 定义插件
const MyPlugin = {
  install(Vue, options) {
    Vue.prototype.$localStorage = {
      set(key, value) {
        localStorage.setItem(key, JSON.stringify(value));
      },
      get(key) {
        return JSON.parse(localStorage.getItem(key));
      },
      remove(key) {
        localStorage.removeItem(key);
      }
    };
  }
};

// 使用插件
Vue.use(MyPlugin);

// 在组件中使用
export default {
  methods: {
    saveData() {
      this.$localStorage.set('key', 'value');
    },
    fetchData() {
      const data = this.$localStorage.get('key');
      console.log(data);
    },
    removeData() {
      this.$localStorage.remove('key');
    }
  }
};

在上面的示例中，我们定义了一个名为 MyPlugin 的插件，它提供了三个方法：set、get 和 remove。在 Vue.use(MyPlugin) 语句中，我们将这个插件注册到 Vue 中，使其可以在全局范围内使用。在组件中，我们可以通过 this.$localStorage 来调用这些方法，以便在浏览器的本地存储中保存、获取或删除数据。