VUE3 如何值保存在浏览器的本地存储中

在Vue3中，可以使用浏览器提供的localStorage或sessionStorage对象将数据保存在浏览器的本地存储中。

localStorage对象用于长期存储数据，即使用户关闭浏览器或电脑重启，数据也不会被清除。而sessionStorage对象用于临时存储数据，在用户关闭浏览器窗口或标签后会被清除。

下面是一个将数据保存在localStorage中的例子：

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

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

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

// 清空所有数据
localStorage.clear()

在Vue3中，我们可以将这些操作封装成一个插件，以便在组件中更方便地使用。例如：

const storage = {
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value))
  },
  get(key) {
    return JSON.parse(localStorage.getItem(key))
  },
  remove(key) {
    localStorage.removeItem(key)
  },
  clear() {
    localStorage.clear()
  }
}

export default {
  install(app) {
    app.config.globalProperties.$storage = storage
  }
}

这个插件将localStorage的操作封装成一个对象，并通过Vue3的全局API将其注册为一个插件。在组件中就可以使用`this.$storage.set(key, value)`等方法来操作localStorage了。注意，因为localStorage只能存储字符串类型的数据，所以我们在存储数据时需要将其转换成JSON字符串，获取数据时再将其解析为对象。