vue3+vite localStorage的用法

在Vue3和Vite中使用localStorage非常简单，你可以按照以下步骤进行操作：

1. 在你的Vue3项目中安装 `@vue/reactivity` 包：

   npm install @vue/reactivity

2. 在你的Vue3组件中引入 `reactive` 和 `toRefs` 方法：

   import { reactive, toRefs } from '@vue/reactivity'

3. 在你的Vue3组件中定义一个响应式的localStorage对象：

   const localStorageData = reactive({
     key1: localStorage.getItem('key1') || '',
     key2: localStorage.getItem('key2') || ''
   })

4. 在你的Vue3组件中定义一个函数来更新localStorage：

   const updateLocalStorage = () => {
     localStorage.setItem('key1', localStorageData.key1)
     localStorage.setItem('key2', localStorageData.key2)
   }

5. 在你的Vue3组件中使用 `toRefs` 方法将 `localStorageData` 对象转换为响应式对象：

   const state = toRefs(localStorageData)

6. 在你的Vue3组件的模板中使用 `v-model` 指令来绑定localStorage数据：

   <input v-model="state.key1" />
   <input v-model="state.key2" />

7. 在你的Vue3组件的生命周期中调用 `updateLocalStorage` 函数来更新localStorage：

   onMounted(() => {
     updateLocalStorage()
   })

   onBeforeUnmount(() => {
     updateLocalStorage()
   })

这样你就可以使用localStorage保存并更新数据了。