写一个localStorage的例子

当用户点击按钮时，下面的例子演示了如何使用 Vue 和 localStorage 来保存和获取数据：

<template>
  <div>
    <input v-model="inputText" type="text" placeholder="输入要保存的文本" />
    <button @click="saveData">保存</button>
    <div>{{ savedData }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      savedData: ''
    };
  },
  methods: {
    saveData() {
      // 保存数据到 localStorage
      localStorage.setItem('myData', this.inputText);
      this.inputText = ''; // 清空输入框
      this.getData(); // 获取保存的数据
    },
    getData() {
      // 从 localStorage 获取数据
      const data = localStorage.getItem('myData');
      this.savedData = data ? data : ''; // 将获取的数据赋值给 savedData
    }
  },
  mounted() {
    this.getData(); // 组件挂载后获取之前保存的数据
  }
};
</script>

在这个例子中，我们使用了一个 input 元素来输入要保存的文本，并通过 v-model 指令绑定到 `inputText` 变量上。点击保存按钮时，调用 `saveData` 方法将文本保存到 localStorage 中，并调用 `getData` 方法获取保存的数据。在组件挂载后，也会调用 `getData` 方法来获取之前保存的数据。

最后，我们在模板中使用 `{{ savedData }}` 来显示保存的数据。

希望这个例子能够帮助你理解如何使用 localStorage 在 Vue 中保存和获取数据。如果还有其他问题，请随时提问。