一、为什么刷新后数据会丢失
vuex存储的数据只是在页面中,相当于全局变量,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。
因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋值。
二、解决思路
办法一:将vuex中的数据直接保存到浏览器缓存中(sessionStorage、localStorage、cookie)
办法二:在页面刷新的时候再次请求远程数据,使之动态更新vuex数据
办法三:在父页面向后台请求远程数据,并且在页面刷新前将vuex的数据先保存至sessionStorage(以防请求数据量过大页面加载时拿不到返回的数据)
分析:
办法一的缺点是不安全,不适用大数据量的存储;
办法二适用于少量的数据,并且不会出现网络延迟;
办法三是要讲的重点,办法二和办法一一起使用。 有两种方式可以把值存储到sessionStoage
// 第一种方式,标准方法 sessionStorage.setItem('email','xxx@qq.com'); // 第二种方式,直接当成普通对象属性赋值。 sessionStorage.blog = 'http://xxxxxx'; 两种获取值的方法 // 1. 标准方法
var email = sessionStorage.getItem('email');
// 2. 直接取属性值
var blog = sessionStorage.blog; 移除key/value // 全部清除
sessionStorage.clear();
//也可以指定删除
sessionStorage.removeItem('keyName') ps:如果这个key是存储在store里面的,还可以这么写 created() {
// 在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem('store')) {
this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
}
// 在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('store', JSON.stringify(this.$store.state))
})
} localStorage的操作方法也同理,这里不再赘述 三、解决方法
本人选择的是sessionStorage,选择的原因是:
其一,由于vue是单页面应用,操作都是在一个页面跳转路由,我只需要在当前页面使用key; 其二,使用sessionStorage可以保证打开页面时sessionStorage的数据为空,而如果是localStorage则会读取上一次打开页面的数据。 其一,由于vue是单页面应用,操作都是在一个页面跳转路由,我只需要在当前页面使用key; 其二,使用sessionStorage可以保证打开页面时sessionStorage的数据为空,而如果是localStorage则会读取上一次打开页面的数据。 代码实现
created () {
if (this.$route.query !== {} && typeof (this.$route.query) === 'string') {
this.userKey = this.$route.query
sessionStorage.setItem('userkey', this.userKey) //初次收到userKey,存起来
} else {
if (sessionStorage.getItem('userkey')) {
this.userKey = sessionStorage.getItem('userkey') //不是第一次了,取出来
} else {
console.log('##userInfo##', store.state.user.userInfo)
//如果实在是没有了,就直接去store里面取
this.userKey = store.state.user.userInfo.userKey
}
}
console.log('##userkey##', this.userKey)//检查userKey变没变
this.getcollect()//调用方法
},
beforeDestroy () {
//毁灭前先移除掉,否则我跳转到其它地方,sessionStorage里面依旧存在着userKey
sessionStorage.removeItem('userkey')
},
四、总结
sessionStorage、localStorage、cookie三者的区别:
localStorage -- 是永久存储在本地,除非你主动去删除;【手动删除】 sessionStorage -- 是存储到当前页面关闭为止,和其他tab页没关联;【页面关闭就没有了】 cookie -- 则根据你设置的有效时间来存储,但缺点是不能储存大数据且不易读取,会和后台进行交互。
怎么把一个对象存储到浏览器本地中?
利用sessionStorage或者localStorage把对象存到浏览器中;
//保存数据
localStorage.setItem("key", "value");
sessionStorage .setItem("key", "value");
//读取数据:
let lastname = localStorage.getItem("key");
let lastname = sessionStorage .getItem("key");
//删除数据:
localStorage.removeItem("key");
sessionStorage .removeItem("key");
Vuex ----状态管理模式 + 库
state - 数据【存项目共享状态,是响应式的,store的数据改变,所有依赖此状态的组件会更新】 $store.state.count mutations - 方法【同步函数,只建议在这个地方修改数据】 inc(state, 参数唯一) {} $store.commit('inc', 2) actions -【异步操作】【提交的是mutations,不直接修改状态】 increment(context, num) {context.commit()} this.$store.dispatch('',arg) getters - 包装数据 【store的计算属性,可缓存】 show: function(state) {} this.$store.getters.show 传参,返回函数:show(state) {return function(参数) {return ...}}【不会缓存数据】
想要存取、修改、删除vuex仓库中的状态数据,需要按照一定的语法规则,比如按照action-->mutaion-->state的规则去增删改查,比如使用辅助函数如增删改查vuex中的数据

解决Vue刷新后页面数据丢失的问题(sessionStorage和localStorage的用法)的更多相关文章

  1. vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

    第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...

  2. Loadrunner解决启动浏览器后页面显示空白

    Loadrunner解决启动浏览器后页面显示空白 2018年5月20日,今天照常打开Loadrunner准备学习,在录制的时候却出现了一个问题,浏览器可以启动,但是程序页面缺是加载不出来,主要症状体现 ...

  3. URL不变的情况下,最实用的vue刷新当前页面,provide / inject 组合 方式实现vue页面刷新

    原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/a ...

  4. 解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题

    解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题: <style> [v-cloak]{ display: none; } </style> <div id=& ...

  5. 解决vue刷新页面以后丢失store的数据

    刷新页面时vue实例重新加载,store就会被重置,可以把定义刷新前把store存入本地localStorage.sessionStorage.cookie中,localStorage是永久储存,重新 ...

  6. Vue打包后页面出现cannot get

    学习Vue有大半个月了,然而遇到了不少坑,完全没有高手们那么容易,中间有不少值得记录下的东东,回头好好理理.先理下今天的: Vue打包命令简单啊,直接在命令行输入:npm run build 然而没一 ...

  7. 直击根源:微信小程序中web-view再次刷新后页面需要退两次

    背景 在上一章(直击根源:vue项目微信小程序页面跳转web-view不刷新)解决了vue在小程序回退不刷新的问题之后,会引出了一个刷新的页面需要点击返回两次才能返回上一个页面 问题描述 在A页面从B ...

  8. Vue 刷新当前页面,并重新加载页面数据

    业务场景:在管理后台,在执行完,增,删,改,操作的时候.我们需要刷新一下页面,重载数据.在JQ中我们会用到location.reload()方法,刷新页面:在vue中,这里需要用到一个 provide ...

  9. vue刷新本页面

    顶层app.vue页面 <template> <div id="app"> <router-view v-if="isRouterAlive ...

  10. 解决 Vue 刷新页面后 store 数据丢失的问题

    原来的状态(页面刷新数据会重置) state: { teamA: '主队' }, mutations: { data_teamA(state, x) { state.teamA = x } },   ...

随机推荐

  1. Linux c 检测U盘挂载路径方法

    思路: 1.使用df -h |grep mnt shell 命令查找到挂载路径信息 本代码是将结果存入文件中,再从文件中解析出路径信息.也可使用fopen直接从管道中读取信息 2.解析出信息最后的/m ...

  2. python连接kafka-2.0

    import sysimport timeimport osimport jsonimport vertica_pythonimport loggingimport pykafkafrom pykaf ...

  3. Loj 507 接竹竿 题解

    Loj链接:接竹竿 $ {\scr \color {SkyBlue}{\text{Solution}}} $ 题目大意: 给定一个数组,每次加入一种颜色的数,可以取走与它颜色相同的两个数之间的所有数, ...

  4. vue中使用echarts来绘制中国地图,NuxtJS制作疫情地图,内有详细注释,我就懒得解释了,vue cli制作疫情地图 代码略有不同哦~~~

    我的代码自我感觉----注释一向十分详细,就不用过多解释都是什么了~~ 因为最近疫情期间在家实在是没事干,想找点事,就练手了个小demo 首先上 NuxtJs版本代码,这里面 export defau ...

  5. Unity之语音识别

    Unity之语音识别 前言 开篇 Unity版本及使用插件 正题 写脚本 挂载到游戏场景中 结尾 唠家常 今日无推荐 前言 开篇 今儿心情好,哈哈哈哈哈 今天小黑给大家带来Unity的语音识别功能,超 ...

  6. 【学习笔记】一种特别有意思的 RTOS 任务切换方法

    一.介绍说明 目前常见流行的 RTOS 实现方式,如 FreeRTOS.uCosII.RT-Thread 等等,它们的内部的任务切换实现原理都差不多,都是通过借助汇编,根据不同的情况读写 CPU 寄存 ...

  7. 黏包现象、struct模块、并行与并发

    1.黏包现象 1.黏包现象产生的背景: 1.1 服务端连续执行三次recv 1.2 客户端连续执行三次send 执行上述操作会发现服务端一次性接收到了客户端三条消息,而后面两次什么都没接收到,该现象称 ...

  8. 【一句话】Java8后abstract class和interface的区别

    首先一句话: Java8后(1)interface支持default和static方法有实现,abstract class依然是抽象方法和非抽象方法,(2)可同时实现多个interface,(3)但成 ...

  9. Nginx11 openresty连接redis(lua-resty-redis)

    1 官网 http://openresty.org/cn/lua-resty-redis-library.html https://github.com/openresty/lua-resty-red ...

  10. STM32F0库函数初始化系列:PWM输出

    void TIM1_Configuration(void) { TIM_TimeBaseInitTypeDef TIM_Time1BaseStructure; TIM_OCInitTypeDef TI ...