vue3本地存储的使用

在Vue3中，可以使用浏览器提供的本地存储API来实现数据的本地存储。常用的本地存储方式有localStorage和sessionStorage。

下面是一个简单的例子，演示如何在Vue3中使用localStorage来存储数据：

<template>
  <div>
    <input v-model="message" />
    <button @click="saveData">保存</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('');
    const saveData = () => {
      localStorage.setItem('data', message.value);
    };
    return {
      message,
      saveData,
    };
  },
};
</script>

在这个例子中，我们使用了Vue3中的`ref`函数来创建了一个响应式变量`message`，并在模板中绑定了它。当用户输入数据并点击保存按钮时，我们调用`localStorage.setItem`方法将数据存储在localStorage中。

如果要从localStorage中获取数据，可以使用`localStorage.getItem`方法：

const data = localStorage.getItem('data');

需要注意的是，localStorage中存储的数据都是字符串类型的，如果需要存储其他类型的数据，需要先将它们转换为字符串类型，或者使用JSON.stringify和JSON.parse方法进行转换。