vue3 localstorage

// 使用 Vue 3 和 localStorage 的示例代码

<template>
  <div>
    <input v-model="message" placeholder="输入内容" />
    <button @click="saveMessage">保存</button>
    <p>从 localStorage 中读取的内容: {{ storedMessage }}</p>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue';

export default {
  setup() {
    const message = ref('');
    const storedMessage = ref('');

    // 从 localStorage 中加载数据
    onMounted(() => {
      const savedMessage = localStorage.getItem('message');
      if (savedMessage) {
        storedMessage.value = savedMessage;
      }
    });

    // 监听 message 变化并保存到 localStorage
    watch(message, (newVal) => {
      localStorage.setItem('message', newVal);
    });

    // 手动保存按钮点击事件
    const saveMessage = () => {
      localStorage.setItem('message', message.value);
      storedMessage.value = message.value;
    };

    return {
      message,
      storedMessage,
      saveMessage
    };
  }
};
</script>

解释说明：

1. 模板部分：

   • 使用了一个 input 输入框，绑定到 message 数据属性。
   • 一个按钮用于手动触发保存操作。
   • 显示从 localStorage 中读取的内容。

2. 脚本部分：

   • 使用了 Vue 3 的组合式 API (setup 函数)。
   • ref 用于创建响应式数据：message 和 storedMessage。
   • onMounted 钩子在组件挂载时从 localStorage 中加载数据。
   • watch 监听 message 的变化，并自动保存到 localStorage。
   • saveMessage 方法用于手动保存 message 到 localStorage 并更新显示内容。