vue3+typescript中，如何使用localStorage

在Vue 3和TypeScript中使用localStorage可以按照以下步骤进行：

1. 在需要使用localStorage的组件中引入：

import { ref } from 'vue'

2. 使用ref创建一个响应式对象，将localStorage的值存储在其中：

const myData = ref(localStorage.getItem('myData') || '')

这里使用`localStorage.getItem()`方法从localStorage中获取值，如果localStorage中不存在该值，则使用空字符串。

3. 监听myData的变化，将变化后的值存储到localStorage中：

watch(myData, (value) => {
  localStorage.setItem('myData', value)
})

这里使用`watch`方法监听myData的变化，一旦myData的值发生变化，就将新的值存储到localStorage中，以便下次使用。

完整的代码示例如下：

<template>
  <div>
    <input v-model="myData" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'

export default defineComponent({
  setup() {
    const myData = ref(localStorage.getItem('myData') || '')

    watch(myData, (value) => {
      localStorage.setItem('myData', value)
    })

    return {
      myData,
    }
  },
})
</script>

在上面的例子中，我们创建了一个输入框，将输入的值存储在localStorage中。每次打开页面时，如果localStorage中存在该值，就将其显示在输入框中，否则显示为空。

这样，就可以在Vue 3和TypeScript中使用localStorage了。