vue中使用localstorage来存储页面信息

当使用Vue构建单页应用程序时，使用localStorage来存储页面信息是一种常见的做法。localStorage是一个API，可以将数据永久存储在浏览器中，即使用户关闭了浏览器，数据也不会丢失。以下是Vue中使用localStorage来存储页面信息的完整攻略，包含两条示例说明。

使用localStorage存储数据

要在Vue中使用localStorage，首先需要了解localStorage的基本API。localStorage具有以下方法：

• localStorage.setItem(key, value) - 将数据保存到localStorage中，并分配一个key。
• localStorage.getItem(key) - 获取分配给该key的值。
• localStorage.removeItem(key) - 将数据从localStorage中删除。
• localStorage.clear() - 删除所有存储在localStorage中的数据。

示例1：将数据保存到localStorage

以下示例将演示如何使用Vue将表单数据保存到localStorage中。

<template>
  <div>
    <input v-model="name" placeholder="Name">
    <input v-model="email" placeholder="Email">
    <button @click="saveForm">Save</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      name: '',
      email: ''
    }
  },
  methods: {
    saveForm: function() {
      localStorage.setItem('formData', JSON.stringify({
        name: this.name,
        email: this.email
      }));
    }
  }
}
</script>

上面的代码将表单数据以JSON格式保存到localStorage中，键为'formData'。请注意，存储在localStorage中的数据必须是字符串格式，因此使用JSON.stringify()将对象转换为字符串。

示例2：从localStorage中检索数据

以下示例将演示如何使用Vue从localStorage中获取先前保存的表单数据。

<template>
  <div>
    <div v-if="formData">
      <p>Name: {{ formData.name }}</p>
      <p>Email: {{ formData.email }}</p>
    </div>
    <div v-else>
      No saved data.
    </div>
    <button @click="clearForm">Clear</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      formData: null
    }
  },
  mounted: function() {
    var formData = localStorage.getItem('formData');
    if (formData) {
      this.formData = JSON.parse(formData);
    }
  },
  methods: {
    clearForm: function() {
      localStorage.removeItem('formData');
      this.formData = null;
    }
  }
}
</script>

上面的代码将从localStorage中获取名为'formData'的数据，并将其解析为Javascript对象。如果在localStorage中找不到'formData'键，则不会显示任何数据。如果想要清除保存在localStorage中的数据，可以使用localStorage.removeItem()方法。

现在，当用户输入数据并单击“保存”按钮时，该数据将在localStorage中保存。用户刷新页面或进行其他导航后，再次访问页面时，数据将自动填充在表单字段中。

总之，使用localStorage在Vue中存储页面信息是一种简单有效的方法，可以大大提高用户体验。