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的更多相关文章

  1. JS浏览器关闭时清空cookie

    function addCookie(objName,objValue,objHours){    var str = objName + "=" + escape(objValu ...

  2. session与cookie 浏览器关闭时的区别

    session与cookie 浏览器关闭时的区别 cookie是存储在本地,当cookie在浏览器关闭的时候,再次打开是否记录之前的值,这跟cookie的过期时间设置有关. 如果cookie的过期时间 ...

  3. vue + ElementUI 关闭对话框清空验证,清除form表单

    前面跟大家提到过 elementUI验证的问题,那么今天就来看看 点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示 1.首先在你的对话框 取消按钮 加一个cli ...

  4. element UI dialog 固定高度 且关闭时清空数据

    解决方法:在dialog里写一个div ,div的大小设置为相对视窗的大小就行 <el-dialog title="xxx" :visible.sync="dial ...

  5. element 关闭弹窗时清空表单信息

    关闭弹窗时清空表单信息: // 弹框关闭时清空信息 closeDialog () { this.$nextTick(() => { this.$refs['createModelForm'].c ...

  6. FLEX监视浏览器关闭事件

    在最近开发的一个FLEX项目中对于浏览器关闭时,需要做一些清理工作,该清理工作在正常情况下保证能运行就行了,要求不是太高. 因此在网上找了一些方法,经过实际测试确实可行,记录下来备查. 该方法可以完全 ...

  7. 浏览器关闭后,Session会话结束了么?

    今天想和大家分享一个关于Session的话题: 当浏览器关闭时,Session就被销毁了? 我们知道Session是JSP的九大内置对象(也叫隐含对象)中的一个,它的作用是可以保 存当前用户的状态信息 ...

  8. Session的生命周期之关于浏览器关闭后的Session

    Session是JSP的九大内置对象中的一个,它可以保存当前用户的各种的状态信息. 初次接触Session时认为Session的生命周期是从浏览器打开一个窗口发送请求开始,到浏览器窗口关闭结束.其实这 ...

  9. 浏览器关闭后Session真的消失了吗?

    今天想和大家分享一个关于Session的话题: 当浏览器关闭时,Session就被销毁了?  我们知道Session是JSP的九大内置对象(也叫隐含对象)中的一个,它的作用是可以保 存当前用户的状态信 ...

随机推荐

  1. you have mixed tabs and spaces.Fix This屏蔽

    这个功能很影响vs的速度,解决办法(VS2010版本为例),将Fix Mixed Tabs改为OFF即可.

  2. tcp_connect函数

    #include <netdb.h> #include <stddef.h> #include <unistd.h> #include <strings.h& ...

  3. php错误提示 open_basedir restriction in effect 解决

    <VirtualHost *:80> DocumentRoot "D:/www/4w_raaaa_com_2017" ServerName www.raaaa.com: ...

  4. Docker 获取镜像 - 一

    docker  images docker 镜像获取方式: 1.pull 可以直接从网上拉取: 2.import  可以从现有容器打包成一个镜像: 3.commit 可以从现有容器一个镜像: 4.bu ...

  5. python练习题1

    1.使用while循环打印输入 1 2 3 4 5 6 8 9 10 num = 1 while num <= 10: if num == 7: num = num + 1 continue e ...

  6. 【webpack】中clean-weabpack-plugin使用方法

    在webpack中打包的文件通常是通过hash生成的,如果文件改动,那么打包的文件就会越来越多,如果想清除之前的文件,可以使用clean-weabpack-plugin插件来处理   注意版本号:我使 ...

  7. table 如何不越过父级div

    设置table 被限制在外围div的方法: 设置样式: table { table-layout: fixed; /*fiexed 列宽由表格宽度和列宽度设定. 默认.列宽度由单元格内容设定.*/ w ...

  8. python(十一)面向切面编程AOP和装饰器

    二.装饰器 装饰器可以在给函数修改功能的同时并不改变这个函数本身.(以下用的都是python2.7) 首先,在python里面函数是对象,在下面的函数里"fun"是函数也是对象可以 ...

  9. 列举两种不同类型的Java标识注释,并解释它们之间的区别。

    列举两种不同类型的Java标识注释,并解释它们之间的区别.

  10. python,<一>读取文件open()

    在实际操作中,我们经常会读取文件,这个时候python为我们提供了一个open()的方法,供我们读取文件,通过help(open),我们可以获取open的方法 f.close()关闭读取 f.read ...