vuex结合session存储数据解决页面刷新数据丢失问题

目录
  • 前言
  • 一、原因：
  • 二、解决思路：
    • 1.本地存储方法:
    • 2.实现步骤：
    • 3.优化：

前言

在项目中表单筛选项里，选择完之后刷新页面数据就变了，没有保留在自己选择的选项上。
在项目中是使用vuex保存数据，但是网页刷新后，store中保存的数据丢失了。

提示：以下是本篇文章正文内容，下面案例可供参考

一、原因：

vuex作为全局的数据状态管理机制，store中的数据是保存在运行内存中，当页面刷新时，页面会重新加载vue实例，store里边的数据就会被重新赋值变成初始化状态。

二、解决思路：

将vuex与本地存储结合使用，页面刷新数据不会丢失

1.本地存储方法:

1、localStorage：永久式存储，关闭页面或浏览器之后localStorage存储的数据不会消失。除非主动删除数据，否则永远不会消失。
以Chrome浏览器为例，数据放在C:\Users\你的计算机名\AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldb
2、sessionStorage：仅在当前会话下有效，关闭当前页面或浏览器数据就会被销毁。sessionStorage实在同源的窗口中始终存在是数据，页面刷新还在，只要关闭当前页面就销毁了。
3、cookie：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。。cookie存放数据大小为4kb左右，一般不能超过20个，不能存储大数据。

拓展：cookie适用场景
（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。
（2）保存上次登录的时间等信息。
（3）保存上次查看的页面（保存访问过的路由信息）
（4）浏览器行为跟踪（如跟踪分析用户行为等）
（5）个性化设置（如用户自定义设置，主题等）

2.实现步骤：

由于vue是单页面应用，操作都是在一个页面完成，而且此项目只在当前打开项目中使用，所以用sessionStorage比较合适

  • 将数据保存在state中，state数据通过mutation方法进行修改，mutation修改state的时候同时将数据保存在sessionStorage中。
  • 在项目打开时，在App.vue中初始化数据，如果本地存储有数据，那么就调用actions中的方法给state赋值。
  • 在表单项进行选择时，同时修改state中的数据。
//store/selectData.js
const state = {//state中存放数据
  dataList: {
    exchangeIdSum: null,
  }
}
const mutations = {
  setExchangeIdSum(state, data) {//将选中的数据重新赋值，并保存到sessionStorage中
    state.dataList.exchangeIdSum = data
    sessionStorage.setItem('dataList',JSON.stringify(state.dataList))
  }
  setDataList(state, data) {
    state.dataList = JSON.parse(JSON.stringify(data))
  }
}
const actions = {
  resetDataList: ({commit}, list) =>{
    setTimeout(() => {
      commit('setDataList', list)
    }, 2000);
  }
}
export default {
  state,
  mutations,
  actions,
}

//表单筛选页面中操作
methods: {
  exchangeChange(val) {//下拉框选择时修改state中数据
    this.$store.commit('selectData/setExchangeIdSum', val)
  },
}
//App.vue中
created(){//页面一进入判断sessionStorage中是否有数据
  sessionStorage.getItem('dataList')?
  this.$store.dispatch('selectData/resetDataList', JSON.parse(sessionStorage.getItem('dataList'))):{}
}

3.优化：

由于之前修改state数据时，mutation每次修改时都要修改sessionStorage，但如果修改的state数据很多，那每次都会修改sessionStorage，此操作略显麻烦

解决：
① 可以将数据直接存到sessionStorage中
② vue在每次刷新时页面都会丢失，可以在页面刷新前将数据存放在sessionStorage中，beforeunload事件可以在页面刷新前触发

到此这篇关于vuex结合session存储数据解决页面刷新数据丢失问题的文章就介绍到这了,更多相关vuex session存储数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中使用sessionStorage记住密码功能

    vue中使用sessionStorage记住密码功能

    sessionStorage和localStorage比较 二者区别 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储. localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的. localStorage和sessionStorage操作 localStorage和sessionStor

  • vue项目如何监听localStorage或sessionStorage的变化

    出现这个问题的起因:在一个VUE页面中,引入两个组件,A组件实现基础信息展示,B组件展示列表,我要通过A组件的一个按钮触发状态,然后B组件根据A组件触发的状态来做业务处理,首先想到的是把状态放在localStorage,接下去就是在B组件怎么监听A组件状态 解决方法: 1.首先在 main.js 中给 Vue.protorype 注册一个全局方法,然后创建一个 StorageEvent 方法,当我在执行sessionStorage.setItem(k, val) 的时候,初始化事件并派发事件.

  • 详解Vue中localstorage和sessionstorage的使用

    1. 项目使用中暴露出来的几个问题 大家到处直接使用localstorage['aaa']='这是一段示例字符串'这些原生语法实现,这样耦合度太高了,假如有一天我们需要换实现方式,或者对存储大小做一些控制,那么需要修改的代码就会很多 项目很大,那么大家起的key的名字难免会重复,而且这样也会造成全局污染 因为localstorage的使用不规范,所以造成了存储空间的浪费和不够用 2. 解决办法 封装storage的使用方法,统一处理 规范storage的key值的命名规则 规范storage的使

  • Vue使用axios引起的后台session不同操作

    新项目前端用的Vue全家桶,使用axios代替ajax请求后台接口,在调整注册接口的时候,发现在session里取不到验证码,排查后才知道获取验证码和注册两个请求的session不同,sessionId不一样. 现在调整一下Vue的配置,修改main.js文件,添加如下两行代码 import axios from 'axios' axios.defaults.withCredentials=true; 修改后 import Vue from 'vue' import App from './Ap

  • vue+koa2实现session、token登陆状态验证的示例

    Session 登陆与 Token 登陆的区别 1.Session 登陆是在服务器端生成用户相关 session 数据,发给客户端 session_id 存放到 cookie 中,这样在客户端请求时带上 session_id 就可以验证服务器端是否存在 session 数据,以此完成用户认证.这种认证方式,可以更好的在服务端对会话进行控制,安全性比较高(session_id 随机),但是服务端需要存储 session 数据(如内存或数据库),这样无疑增加维护成本和减弱可扩展性(多台服务器). C

  • vuex结合session存储数据解决页面刷新数据丢失问题

    vuex结合session存储数据解决页面刷新数据丢失问题

    目录 前言 一.原因: 二.解决思路: 1.本地存储方法: 2.实现步骤: 3.优化: 前言 在项目中表单筛选项里,选择完之后刷新页面数据就变了,没有保留在自己选择的选项上. 在项目中是使用vuex保存数据,但是网页刷新后,store中保存的数据丢失了. 提示:以下是本篇文章正文内容,下面案例可供参考 一.原因: vuex作为全局的数据状态管理机制,store中的数据是保存在运行内存中,当页面刷新时,页面会重新加载vue实例,store里边的数据就会被重新赋值变成初始化状态. 二.解决思路: 将

  • vuex页面刷新数据丢失问题的四种解决方式

    目录 为什么说刷新页面vuex的数据会丢失 第一种方法用sessionStorage 第二种方法是 vuex-along 示例如下 第三种方法是 vuex-persistedstate 示例如下 第四种方法是 vuex-persist 示例如下 结语: 为什么说刷新页面vuex的数据会丢失 刷新页面vuex的数据会丢失属于正常现象,因为JS的数据都是保存在浏览器的堆栈内存里面的,刷新浏览器页面,以前堆栈申请的内存被释放,这就是浏览器的运行机制,那么堆栈里的数据自然就清空了. 第一种方法用sess

  • vue路由传参页面刷新参数丢失问题解决方案

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //

  • 使用sessionStorage解决vuex在页面刷新后数据被清除的问题

    1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具有自行百度 我这里使用sessionStorage,这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态从sessionStorage中得到,这样组件就可以响应式的变化 3.具体实现

  • 解决vuex数据页面刷新后初始化操作

    在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题!下面是我用过的解决方法 1.利用storage缓存来实现vuex数据的刷新问题 我们可以在mutation等vuex的方法中对于数据进行改变时,将数据同时存储进我们的本地浏览器缓存中:下面是我在mutation中写的方法: 同步将数据的更改保存,也可以在页面调用vuex的mutation方法时同步更改:但是这种方法只能针对少量的数据需要保持不刷新,在真正的卡发中并不适用

  • 解决vue刷新页面以后丢失store的数据问题

    刷新页面时vue实例重新加载,store就会被重置,可以把定义刷新前把store存入本地localStorage.sessionStorage.cookie中,localStorage是永久储存,重新打开页面时会读取上一次打开的页面数据,sessionStorage是储存到关闭为止,cookie不适合存大量数据.根据我的需求,最合适的是sessionStorage. beforeunload在页面刷新时触发,可以监听这个方法,让页面在刷新前存store到sessionStorage中. 当然,在

  • 关于页面刷新vuex数据消失问题解决方案

    VBox持续进行中,哀家苦啊,有没有谁给个star. vuex是vue用于数据存储的,和redux充当同样的角色. 最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零.这是头疼的问题. 网上搜,大家的方案都是把数据转移到 localStorage或者其他持久化存储(例如indexDB). 这倒是可以,我在设计之初因为匆忙,没有考虑周全,这下好,然不成每个 mutation都去存一下. 这个弄的我很不开心,周六在公司,本来就困的要死,又想不到合理的解决方案,昏昏沉沉睡

  • vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法

    我需要在搜索页拿到结果之后跳转到搜索结果页并携带搜索结果 尝试过几种方法之后最终采用vuex+sessionStorage结合的方法在mutations中 setResultValue(state,flag){ sessionStorage.setItem("resultValue", JSON.stringify(flag)) state.resultValue = flag } 在getters中 getResultValue getResultValue(state){ stat

  • 解决vue页面刷新vuex中state数据丢失的问题

    解决vue页面刷新vuex中state数据丢失的问题

    页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 state,那么该问题即可解决. 1.localstorage 可以使用 localstorage 来保存信息. [在某组件中添加如下钩子函数.比如 App.vue中] created() { //在页面加载时读取localStorage里的状态信息 if (localStorage.getItem("store") ) { this.$store

  • vuex页面刷新后数据丢失的方法

    1. 原因 (1)js代码是运行在内存中的,代码运行时的所有变量.函数都是保存在内存中. (2)刷新页面,以前申请的内存被释放,重新加载脚本代码,变量要重新赋值. (3)要想刷新后数据不丢失就必须把数据存储在外部,例如:Local Storage.Session Storage.Index DB等.这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储. 2. HTML5提供的2种客户端存储数据的新方法 localStorage存储数据: (1)存储的数据是永久性的,永不过期: (

随机推荐