前言

在浏览网页时我们有些时候需要记住一些用户选择的信息，比如登陆时我们如果选择了记住密码，那么我们下次进入该网页时就会有你上次的登陆信息。
在网站开发中，我们可能会遇到左边是列表，右边显示内容的页面，当我们切换页面再返回的时候，需要记住我们上次选择的列表项。
这个时候，我们就要使用数据储存来记住一些信息。这里有两种方法：Vuex(状态管理)和本地存储（localStorage和sessionStorage）
（这里直接上代码，下一篇详细讲解）。

vuex这里可以用两种方式写，区分是使用辅助函数与否

一、vuex

1.创建vuex

首先我们要新建一个store文件夹，下面包含index.js,项目过大可再加一个modules文件夹下面写js,这里就在modules文件夹里面新建一个proudct.js文件。

我们需要写一个vuex,相当于我要放苹果，所以我需要先买一个果盘。
这里我命名为proudct，代码如下：

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const state = {id:null,code:null,}
const mutations = {//保存数据CHANGE_ACTIVE_LI(state, { id, code }) {state.id = idstate.code = code},//清除数据SET_CLEAR_DATA(state,data){state.id=data}
}
const actions = {//保存数据changeSetting({ commit }, data) {commit('CHANGE_ACTIVE_LI', { id: data.id, code: data.code })},//清除数据clearVuex({ commit }) {commit("SET_CLEAR_DATA", null);},}
export default {//解决模块名冲突namespaced: true,state,mutations,actions

然后记住在store下面的index.js里面引入，这一步非常重要：

2.存入数据

 next() {//这里的product/changeSetting是指定vuex中的方法，我这里指定把后面的对象加在prouduct中changeSetting方法里面去this.$store.dispatch("product/changeSetting", {id: this.id,code: this.code,});},

3.取出数据

当我们需要使用数据时，也就是拿出苹果的时候，我们就这样用：，代码如下：

//取出vuex中proudct.js中的id的值this.id = this.$store.state.product.id;

到这里，已经看出来这种方法的不足之处，如果我要放很多数据，那我岂不是要写很多键值，而且取值的时候也要写很多个this.$store.state.product.id;
所以，为了解决这一问题，我们可以使用辅助函数，可以存放对象的方式。

二、本地存储

vuex存储的数据会在页面刷新后被移除，但本地存储的数据却不会。本地存储分两种：localStorage和sessionStorage
区别：
localStorage：可长期存储数据，除非用户清楚localStorage信息，否则数据会一直存在。同一中浏览器之间，不同页面，数据可以共享。
sessionStorage：短期存储数据，用户关闭标签页后或直接关闭浏览器后数据会清空。同一浏览器不同页面之间，数据不可共享
使用方法相同。

1.存储数据

本地存储可直接使用，不需要引入，代码如下：

// 将this.pickerItem的数据存储入insuranceCode,需提前转化成string类型
localStorage.setItem("insuranceCode", JSON.stringify(this.pickerItem));
sessionStorage.setItem("insuranceCode", JSON.stringify(this.pickerItem));

2.取出数据

现在我要把数据放入vuex中存起来，相当于把苹果放入果盘，我们需要在页面中的方法里面这样使用，代码如下：

 JSON.parse(localStorage.getItem("insuranceCode"));
JSON.parse(sessionStorage.getItem("insuranceCode"));

3.清除数据

，可清楚指定的数据，也可清楚所有数据，代码如下：

// 清除insuranceCode
localStorage.removeItem("insuranceCode");
sessionStorage.removeItem("insuranceCode");
// 清除所有
localStorage.clear();
sessionStorage.clear();

总结

以上就是vuex和本地存储的使用方法，如果你对vuex还不太了解，那么请看下一篇文章：vuex状态管理详解。

vue存储数据的几种方法（Vuex与本地存储）相关推荐

vuex存储数据的几种方法
一.Vuex是什么 Vuex是专门为Vuejs应用程序设计的状态管理工具.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 1.Vuex的构成 1)stat ...
android平台上持久化存储3种手段_Android 数据持久化==存储数据的五种方法
1.使用SharedPreferences存储数据 2.文件存储数据 3.SQLite数据库存储数据 4.使用ContentProvider存储数据 5.网络存储数据第一种: 使用SharedPre ...
vue组件通信的几种方法
vue中我们最常使用的就是父子之间的通信还有全局数据管理vuex了,下面粗略说一下vue组件通信的几种方法组件通信的几种方式 1.父子组件通信 2.兄弟组件通信 3.跨多层级组件通信 4.任意组件( ...
前端js调用后端API获取数据的三种方法（2022.7.25）
前端js调用后台API获取数据的三种方法(2022.7.25) 前言需求分析一个Get实例浏览器请求 SoapUI软件请求一个Post实例浏览器请求 SoapUI软件请求 1.Http简介( ...
oracle 数据导入 mysql_oracle数据库导出和oracle导入数据的二种方法(oracle导入导出数据)...
这篇文章主要介绍了oracle导入导出数据的二种方法,利用PL/SQL Developer工具导出和利用cmd的操作命令导出的出方法,大家参考使用吧方法一:利用PL/SQL Developer工具导 ...
oracle数据库导出和oracle导入数据的二种方法(oracle导入导出数据)
这篇文章主要介绍了oracle导入导出数据的二种方法,利用PL/SQL Developer工具导出和利用cmd的操作命令导出的出方法,大家参考使用吧方法一:利用PL/SQL Developer工具导 ...
mysql如何上传照片_MySQL数据库之图片上传存储数据库的２种方法讲解（Mysql）
本文主要向大家介绍了MySQL数据库之图片上传存储数据库的2种方法讲解(Mysql) ,通过具体的内容向大家展现,希望对大家学习MySQL数据库有所帮助. 数据库Mysql存储,读取图片在项目中,很 ...
获得GPS数据的两种方法 1读串口
获得GPS数据的两种方法 1读串口 - [技术] 版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明 http://memset.blogbus.com/logs/17801310.ht ...
vue三种ajax请求方式,vue请求数据的三种方式
请求数据的方式: vue-resource 官方提供的 vue的一个插件 axios fetch-jsonp 一,vue-resource请求数据介绍:vue-resource请求数据方式是官方提供 ...

vue存储数据的几种方法（Vuex与本地存储）