VUE 浏览器关闭时清空localStorage
1. 概述
1.1 说明
vue项目中,为了解决页面刷新时vuex数据丢失问题,使用localStorage进行存储对应的vuex数据(判断对应localStorage是否为空,不为空则为vuex中数据进行赋值),而localStorage的存储时间为长久存储,故为了数据安全则需在浏览器关闭时进行清空存储。
1.2 条件与思路
1.vue项目对应的单个网页刷新数据不丢失 --- 使用sessionStorage进行存储并解决页面刷新vuex数据丢失问题
2.可多个标签页打开数据共享 --- 使用localStorage进行存储共享
3.关闭浏览器后再次进入浏览器数据重置(如重新登录) --- 关闭浏览器时清空localStorage
2. 实例
2.1 为localStorage与sessionStorage赋值
1.登录成功后进行赋值操作(调用vuex)
this.$store.commit(types.LOGIN, tokenInfo);
2.路由守卫时进行数据判断与赋值操作
router.beforeEach((to, from, next) => {
let token=store.getters.token;
if (!token){
token=localStorage.getItem("token");
if(!token){
token=sessionStorage.getItem("token");
}
if (token){
store.commit(types.LOGIN,token);
}
}
// 判断token是否存在并进行跳转
});
3.vuex中的操作
mutations: {
[types.LOGIN]: (state, data) => {
localStorage.token = data;
sessionStorage.token = data;
state.token = data;
}
}
2.2 App.vue文件中统一设置关闭浏览器清空localStorage
mounted: function () {
//此方法刷新页面时也会执行
window.addEventListener('beforeunload',()=>{
localStorage.removeItem('token');
});
},
VUE 浏览器关闭时清空localStorage的更多相关文章
- JS浏览器关闭时清空cookie
function addCookie(objName,objValue,objHours){ var str = objName + "=" + escape(objValu ...
- session与cookie 浏览器关闭时的区别
session与cookie 浏览器关闭时的区别 cookie是存储在本地,当cookie在浏览器关闭的时候,再次打开是否记录之前的值,这跟cookie的过期时间设置有关. 如果cookie的过期时间 ...
- vue + ElementUI 关闭对话框清空验证,清除form表单
前面跟大家提到过 elementUI验证的问题,那么今天就来看看 点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示 1.首先在你的对话框 取消按钮 加一个cli ...
- element UI dialog 固定高度 且关闭时清空数据
解决方法:在dialog里写一个div ,div的大小设置为相对视窗的大小就行 <el-dialog title="xxx" :visible.sync="dial ...
- element 关闭弹窗时清空表单信息
关闭弹窗时清空表单信息: // 弹框关闭时清空信息 closeDialog () { this.$nextTick(() => { this.$refs['createModelForm'].c ...
- FLEX监视浏览器关闭事件
在最近开发的一个FLEX项目中对于浏览器关闭时,需要做一些清理工作,该清理工作在正常情况下保证能运行就行了,要求不是太高. 因此在网上找了一些方法,经过实际测试确实可行,记录下来备查. 该方法可以完全 ...
- 浏览器关闭后,Session会话结束了么?
今天想和大家分享一个关于Session的话题: 当浏览器关闭时,Session就被销毁了? 我们知道Session是JSP的九大内置对象(也叫隐含对象)中的一个,它的作用是可以保 存当前用户的状态信息 ...
- Session的生命周期之关于浏览器关闭后的Session
Session是JSP的九大内置对象中的一个,它可以保存当前用户的各种的状态信息. 初次接触Session时认为Session的生命周期是从浏览器打开一个窗口发送请求开始,到浏览器窗口关闭结束.其实这 ...
- 浏览器关闭后Session真的消失了吗?
今天想和大家分享一个关于Session的话题: 当浏览器关闭时,Session就被销毁了? 我们知道Session是JSP的九大内置对象(也叫隐含对象)中的一个,它的作用是可以保 存当前用户的状态信 ...
随机推荐
- sql server中的merge
http://www.cnblogs.com/CareySon/archive/2012/03/07/2383690.html 简介 Merge关键字是一个神奇的DML关键字.它在SQL Server ...
- idea中配置Springboot热部署
1 pom.xml文件 注:热部署功能spring-boot-1.3开始有的 <!--添加依赖--> <dependency> <groupId>org.sprin ...
- asp.net mvc && asp.net 页面跳转
1.使用传统的Response.Redirect例如string url = "/account/create";Response.Redirect(url); 1.Server. ...
- 修改输入框placeholder的样式
1. h5页面: //修改placeholder 样式 (chrome,其余类似加前缀) ::-webkit-input-placeholder { color:rgba(21,30,38,0.35) ...
- 启动CDH的cloudera-scm-server报错Error: JAVA_HOME is not set and Java could not be found
1 报错信息如下 +======================================================================+| Error: JAVA_HOME ...
- python的for循环、while循环
1.for循环使用之乘法表 for i in range(1,10): for j in range(1,i+1): print('%s * %s = %s '%(j,i,i*j),end='') p ...
- 单片机AT和STC区别
http://www.21ic.com/jichuzhishi/datasheet/AT89C51/data/192017.html
- mysql 查询优化 ~ 多表查询基础知识
一 什么是驱动表 1)指定了联接条件时,满足查询条件的记录行数少的表为[驱动表]: 2)未指定联接条件时,行数少的表为[驱动表](Important!). 表现 explain第一行出现的 ...
- keepalived高可用系列~keepalived+mysql
一 简介:建立读写分离模式 二 keepalived相关配置 vrrp_instance VI_1 { state MASTER // 可修改 interface eth0 virtual_r ...
- python - zipfile模块
import zipfile # f=zipfile.ZipFile(filename, mode="r", compression=ZIP_STORED, allowZip64= ...