解决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 } }, ...
随机推荐
- Hugging Face 开源库介绍
Hugging Face 的开源生态今年成长迅速,timm 成为新加入的成员.diffusers.evaluate 以及 skops 等各种库蓬勃发展. Transformers Transforme ...
- PWA-H5 Web App优化探索之路(Service Worker,Lighthouse)
PWA是什么? Progressive Web App 渐进式web应用程序,简单来说,就是可以让你的WEB App,带来与原生App相媲美的用户体验.. 为什么要用PWA? 简单来说,是为了web应 ...
- flutter_swiper:Another exception was thrown: ScrollController attached to multiple scroll views.
Another exception was thrown: ScrollController attached to multiple scroll views. 翻译一下:引发了另一个异常:Scro ...
- 重磅!瞄准 Web 3.0,谷歌云推出专为区块链服务的 Blockchain Node Engine!
[本文由Cloud Ace整理发布,谷歌云服务请访问Cloud Ace 官网] 区块链技术正在为世界各地的消费者和企业带来巨大的创新和价值创造.随着技术变得越来越主流,公司需要可扩展.安全和可持续的基 ...
- Lamdba表达式的无参数无返回值的练习-Lambda表达式有参数有返回值的练习
Lamdba表达式的无参数无返回值的练习 题目给定一个厨子Cook接口,内含唯一的抽象方法makeFood,且无参数.无返回值.如下∶public interface cook {void makeF ...
- BST 插入节点传新版本(原痛恨JavaScript每一天 __ 没有指针)
2023年2月2日更新 perform代码上传到GitHub了,新方法比老方法慢,不建议在生产环境使用 GitHub地址:https://github.com/Dou-fugan/webDemo/tr ...
- 力扣---1137. 第 N 个泰波那契数
泰波那契序列 Tn 定义如下: T0 = 0, T1 = 1, T2 = 1, 且在 n >= 0 的条件下 Tn+3 = Tn + Tn+1 + Tn+2给你整数 n,请返回第 n 个泰波那契 ...
- 【ccc】为了ds的ccc
补一下之前的笔记: 今日:str!!~~~ 然后还有gets 和 puts 和一些基础的东西 strlen:统计字符串长度 strcpy:将某个字符串赋值到字符数组中 strcat:拼接字符 ...
- Node版本管理工具 - Nvm的下载、安装配置与使用
1.业务背景 不同时期的项目使用的Node版本也不一样,随着版本的更新一直在使用的Node版本也在不断升级,本文介绍一个Node版本的管理工具,可自由切换版本. 2.Nvm下载与安装 1)下载 下载地 ...
- 可视化的容器镜像的图形管理工具Portainer【强烈推荐】
Portainer是一个可视化的容器镜像的图形管理工具,利用Portainer可以轻松构建,管理和维护Docker环境. 而且完全免费,基于容器化的安装方式,方便高效部署. 官方站点:https:// ...