vue3 localstorage

在 Vue3 中使用 LocalStorage 存储数据的方法如下：

1. 在组件中使用 localStorage

可以在组件中通过以下方式来使用 localStorage：

// 设置数据到 localStorage
localStorage.setItem('key', 'value');

// 从 localStorage 中获取数据
const data = localStorage.getItem('key');

// 从 localStorage 中移除数据
localStorage.removeItem('key');

2. 在 Vue3 中使用插件封装 localStorage

可以通过封装 localStorage 的方式来简化代码，使其更易于维护。可以创建一个插件来封装 localStorage，例如：

const storagePlugin = {
  install(app) {
    app.config.globalProperties.$storage = {
      set(key, value) {
        localStorage.setItem(key, JSON.stringify(value));
      },
      get(key) {
        return JSON.parse(localStorage.getItem(key));
      },
      remove(key) {
        localStorage.removeItem(key);
      }
    }
  }
}

// 在 main.js 中使用插件
createApp(App)
  .use(storagePlugin)
  .mount('#app');

然后，在组件中就可以通过 `this.$storage.set(key, value)` 的方式来存储数据，通过 `this.$storage.get(key)` 的方式来获取数据，通过 `this.$storage.remove(key)` 的方式来移除数据。注意，封装的时候需要使用 JSON.stringify 和 JSON.parse 来序列化和反序列化数据。