如何在Vue3中使用本地存储localStorage保存数据？

在Vue 3中，你可以使用Vue 3的生命周期钩子和Composition API来使用localStorage保存和获取数据。以下是一个简单的例子：

<template>
  <div>
    <input type="text" v-model="inputValue" @input="saveData">
    <button @click="loadData">Load Data</button>
  </div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
 
export default {
  setup() {
    const inputValue = ref('');
 
    // 保存数据到localStorage
    function saveData() {
      localStorage.setItem('data', inputValue.value);
    }
 
    // 从localStorage加载数据
    function loadData() {
      inputValue.value = localStorage.getItem('data') || '';
    }
 
    // 在组件挂载时加载数据
    onMounted(loadData);
 
    return {
      inputValue,
      saveData,
      loadData
    };
  }
};
</script>

在这个例子中，我们有一个文本输入框绑定到一个响应式变量inputValue。每次输入发生变化时，通过saveData函数更新localStorage中的数据。loadData函数在组件加载时被调用，以从localStorage中检索先前保存的数据并更新inputValue。