详解Vue中localStorage和sessionStorage的使用

简介

对于一些 Vue.js 开发者来说，localStorage 和 sessionStorage 是存储数据的不错选择，本文将详细介绍这两个 API 的使用，同时说明如何在 Vue.js 组件中使用它们。

localStorage

localStorage 是 Web Storage API 中的一种，提供了一个非常方便的用来存储键值对数据的方式，数据存储在浏览器的本地（客户端）中。

设置值

可以通过使用 setItem() 方法来存储数据。例如，以下代码将一个键值对存储为字符串：

localStorage.setItem('key', 'value');

获取值

可以通过使用 getItem() 方法来获取值。例如，以下代码将输出 'value'：

const value = localStorage.getItem('key');
console.log(value); // 输出 'value'

删除值

可以通过使用 removeItem() 方法来删除键值对。例如，以下代码将删除键是 'key' 的值：

localStorage.removeItem('key');

实际示例

以下代码演示如何在 Vue 组件中使用 localStorage：

<template>
  <div>
    <input v-model="name" placeholder="请输入姓名" />
    <button @click="saveNameToLocalStorage">保存</button>
    <div>{{ message }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      message: "",
    };
  },
  methods: {
    saveNameToLocalStorage() {
      localStorage.setItem("name", this.name);
      this.message = "已保存至 localStorage 中";
    },
    loadNameFromLocalStorage() {
      const savedName = localStorage.getItem("name");
      if (savedName) {
        this.message = `您之前保存的名字是 ${savedName}`;
      } else {
        this.message = "LocalStorage 中未保存您的名字";
      }
    },
  },
  mounted() {
    this.loadNameFromLocalStorage();
  },
};
</script>

sessionStorage

sessionStorage 的工作方式与 localStorage 类似，它是一种存储在浏览器（客户端）中的短暂数据存储方式，当用户关闭浏览器窗口时，数据将被删除。

设置值

可以通过使用 sessionStorage.setItem() 方法来存储数据。以下代码将一个键值对存储为字符串：

sessionStorage.setItem('key', 'value');

获取值

可以通过使用 sessionStorage.getItem() 方法来获取值。以下代码将输出 'value'：

const value = sessionStorage.getItem('key');
console.log(value); // 输出 'value'

删除值

可以通过使用 sessionStorage.removeItem() 方法来删除键值对，以下代码将删除键是 'key' 的值：

sessionStorage.removeItem('key');

实际示例

以下代码演示如何在 Vue 组件中使用 sessionStorage：

<template>
  <div>
    <input v-model="name" placeholder="请输入姓名" />
    <button @click="saveNameToSessionStorage">保存</button>
    <div>{{ message }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      message: "",
    };
  },
  methods: {
    saveNameToSessionStorage() {
      sessionStorage.setItem("name", this.name);
      this.message = "已保存至 sessionStorage 中";
    },
    loadNameFromSessionStorage() {
      const savedName = sessionStorage.getItem("name");
      if (savedName) {
        this.message = `您之前保存的名字是 ${savedName}`;
      } else {
        this.message = "sessionStorage 中未保存您的名字";
      }
    },
  },
  mounted() {
    this.loadNameFromSessionStorage();
  },
};
</script>

总结

本文详细介绍了 localStorage 和 sessionStorage 的用法。使用它们可以避免向后端频繁发送请求，提高了用户体验。在实际开发中，这两种存储方式也是存储瞬时信息的最佳选择。