Vue.js 使用 sessionStorage 和 localStorage 存储数据-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要对数据进行存储和管理。Vue.js 是一款流行的 JavaScript 框架，它提供了多种方式来存储数据。本文将重点介绍 Vue.js 如何使用 sessionStorage 和 localStorage 存储数据，并给出具体的示例代码。

sessionStorage 和 localStorage 的区别

在介绍如何使用 sessionStorage 和 localStorage 存储数据之前，先来了解一下它们的区别。

sessionStorage 和 localStorage 都是 HTML5 提供的 Web 存储方式，它们都支持键值对形式的数据存储，并且可以通过 JavaScript 进行读取和写入。

区别在于：

sessionStorage 存储的数据仅在当前会话中有效，会话结束后数据会被删除；
localStorage 存储的数据在浏览器关闭后依然有效，除非手动删除或者清除缓存。

因此，sessionStorage 适用于临时保存数据，而 localStorage 适用于长期保存数据。

使用 sessionStorage 存储数据

使用 sessionStorage 存储数据非常简单，只需要调用 sessionStorage 对象的 setItem 方法即可。下面是一个简单的示例代码：

// 存储数据
sessionStorage.setItem('name', 'Tom');
sessionStorage.setItem('age', '18');

// 读取数据
const name = sessionStorage.getItem('name');
const age = sessionStorage.getItem('age');

在上面的示例中，我们使用 sessionStorage 存储了两个键值对，分别是 name 和 age，然后通过 getItem 方法读取数据。

需要注意的是，sessionStorage 只能存储字符串类型的数据，如果需要存储其他类型的数据，需要先将其转换为字符串类型再进行存储。

使用 localStorage 存储数据

使用 localStorage 存储数据与使用 sessionStorage 类似，只需要调用 localStorage 对象的 setItem 方法即可。下面是一个示例代码：

// 存储数据
localStorage.setItem('name', 'Tom');
localStorage.setItem('age', '18');

// 读取数据
const name = localStorage.getItem('name');
const age = localStorage.getItem('age');

在上面的示例中，我们使用 localStorage 存储了两个键值对，分别是 name 和 age，然后通过 getItem 方法读取数据。

需要注意的是，localStorage 同样只能存储字符串类型的数据，如果需要存储其他类型的数据，需要先将其转换为字符串类型再进行存储。

Vue.js 中使用 sessionStorage 和 localStorage

在 Vue.js 中使用 sessionStorage 和 localStorage 存储数据同样非常简单。Vue.js 提供了一个插件 vue-web-storage，可以方便地集成 sessionStorage 和 localStorage。

首先，我们需要安装 vue-web-storage：

npm install vue-web-storage --save

然后，在 main.js 中引入并使用插件：

import Vue from 'vue'
import VueWebStorage from 'vue-web-storage'

Vue.use(VueWebStorage, {
  prefix: 'app_', // 存储前缀
  drivers: ['session', 'local'], // 存储方式
});

在上面的示例中，我们将 vue-web-storage 注册为 Vue.js 的插件，并设置了存储前缀为 app_，同时指定了存储方式为 sessionStorage 和 localStorage。

接着，在 Vue.js 组件中使用 $sessionStorage 或 $localStorage 来进行数据的读取和写入。下面是一个示例代码：

// javascriptcn.com 代码示例
export default {
  data() {
    return {
      name: '',
      age: '',
    }
  },
  mounted() {
    // 从 sessionStorage 中读取数据
    this.name = this.$sessionStorage.get('name', 'Tom');
    this.age = this.$sessionStorage.get('age', '18');

    // 存储数据到 localStorage 中
    this.$localStorage.set('name', this.name);
    this.$localStorage.set('age', this.age);
  }
}

在上面的示例中，我们在组件的 mounted 钩子函数中，使用 $sessionStorage 和 $localStorage 分别读取和存储了数据。

需要注意的是，$sessionStorage 和 $localStorage 可以接受一个默认值作为参数，如果存储中没有对应的键值对，则会返回默认值。

总结

本文详细介绍了 Vue.js 如何使用 sessionStorage 和 localStorage 存储数据，并给出了具体的示例代码。需要注意的是，sessionStorage 和 localStorage 都只能存储字符串类型的数据，如果需要存储其他类型的数据，需要先将其转换为字符串类型再进行存储。

使用 sessionStorage 和 localStorage 可以方便地管理数据，并且在 Vue.js 中使用插件 vue-web-storage 可以更加便捷地集成这两种存储方式。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65780536d2f5e1655d1d902d