解决Vue刷新后页面数据丢失的问题(sessionStorage和localStorage的用法)
一、为什么刷新后数据会丢失
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的用法)的更多相关文章
- vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失
第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...
- Loadrunner解决启动浏览器后页面显示空白
Loadrunner解决启动浏览器后页面显示空白 2018年5月20日,今天照常打开Loadrunner准备学习,在录制的时候却出现了一个问题,浏览器可以启动,但是程序页面缺是加载不出来,主要症状体现 ...
- URL不变的情况下,最实用的vue刷新当前页面,provide / inject 组合 方式实现vue页面刷新
原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/a ...
- 解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题
解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题: <style> [v-cloak]{ display: none; } </style> <div id=& ...
- 解决vue刷新页面以后丢失store的数据
刷新页面时vue实例重新加载,store就会被重置,可以把定义刷新前把store存入本地localStorage.sessionStorage.cookie中,localStorage是永久储存,重新 ...
- Vue打包后页面出现cannot get
学习Vue有大半个月了,然而遇到了不少坑,完全没有高手们那么容易,中间有不少值得记录下的东东,回头好好理理.先理下今天的: Vue打包命令简单啊,直接在命令行输入:npm run build 然而没一 ...
- 直击根源:微信小程序中web-view再次刷新后页面需要退两次
背景 在上一章(直击根源:vue项目微信小程序页面跳转web-view不刷新)解决了vue在小程序回退不刷新的问题之后,会引出了一个刷新的页面需要点击返回两次才能返回上一个页面 问题描述 在A页面从B ...
- Vue 刷新当前页面,并重新加载页面数据
业务场景:在管理后台,在执行完,增,删,改,操作的时候.我们需要刷新一下页面,重载数据.在JQ中我们会用到location.reload()方法,刷新页面:在vue中,这里需要用到一个 provide ...
- vue刷新本页面
顶层app.vue页面 <template> <div id="app"> <router-view v-if="isRouterAlive ...
- 解决 Vue 刷新页面后 store 数据丢失的问题
原来的状态(页面刷新数据会重置) state: { teamA: '主队' }, mutations: { data_teamA(state, x) { state.teamA = x } }, ...
随机推荐
- Linux c 检测U盘挂载路径方法
思路: 1.使用df -h |grep mnt shell 命令查找到挂载路径信息 本代码是将结果存入文件中,再从文件中解析出路径信息.也可使用fopen直接从管道中读取信息 2.解析出信息最后的/m ...
- python连接kafka-2.0
import sysimport timeimport osimport jsonimport vertica_pythonimport loggingimport pykafkafrom pykaf ...
- Loj 507 接竹竿 题解
Loj链接:接竹竿 $ {\scr \color {SkyBlue}{\text{Solution}}} $ 题目大意: 给定一个数组,每次加入一种颜色的数,可以取走与它颜色相同的两个数之间的所有数, ...
- vue中使用echarts来绘制中国地图,NuxtJS制作疫情地图,内有详细注释,我就懒得解释了,vue cli制作疫情地图 代码略有不同哦~~~
我的代码自我感觉----注释一向十分详细,就不用过多解释都是什么了~~ 因为最近疫情期间在家实在是没事干,想找点事,就练手了个小demo 首先上 NuxtJs版本代码,这里面 export defau ...
- Unity之语音识别
Unity之语音识别 前言 开篇 Unity版本及使用插件 正题 写脚本 挂载到游戏场景中 结尾 唠家常 今日无推荐 前言 开篇 今儿心情好,哈哈哈哈哈 今天小黑给大家带来Unity的语音识别功能,超 ...
- 【学习笔记】一种特别有意思的 RTOS 任务切换方法
一.介绍说明 目前常见流行的 RTOS 实现方式,如 FreeRTOS.uCosII.RT-Thread 等等,它们的内部的任务切换实现原理都差不多,都是通过借助汇编,根据不同的情况读写 CPU 寄存 ...
- 黏包现象、struct模块、并行与并发
1.黏包现象 1.黏包现象产生的背景: 1.1 服务端连续执行三次recv 1.2 客户端连续执行三次send 执行上述操作会发现服务端一次性接收到了客户端三条消息,而后面两次什么都没接收到,该现象称 ...
- 【一句话】Java8后abstract class和interface的区别
首先一句话: Java8后(1)interface支持default和static方法有实现,abstract class依然是抽象方法和非抽象方法,(2)可同时实现多个interface,(3)但成 ...
- Nginx11 openresty连接redis(lua-resty-redis)
1 官网 http://openresty.org/cn/lua-resty-redis-library.html https://github.com/openresty/lua-resty-red ...
- STM32F0库函数初始化系列:PWM输出
void TIM1_Configuration(void) { TIM_TimeBaseInitTypeDef TIM_Time1BaseStructure; TIM_OCInitTypeDef TI ...