【vue】vue 关闭浏览器窗口的时候，清空localStorage的数据

最新推荐文章于 2024-09-12 00:33:30 发布

LuviaWu

最新推荐文章于 2024-09-12 00:33:30 发布

阅读量1.9w

点赞数 7

分类专栏：工作笔记文章标签： vue vue关闭页面清除缓存

工作笔记专栏收录该内容

47 篇文章 2 订阅

订阅专栏

vue 关闭浏览器窗口的时候，清空localStorage的数据

如果是用vue做的单页面程序的时候，将监听的方法放在App.vue是最灵活的

<template>
    <div id="main" class="app-main">
        <router-view></router-view>
    </div>
</template>
 
<script>
    export default {
        data () {
            return {
                theme: this.$store.state.app.themeColor
            };
        },
        mounted () {
 
        },
        beforeDestroy () {
 
        },
        methods: {
 
        },
        mounted(){
            // 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据
            window.onbeforeunload = function (e) {
                var storage = window.localStorage;
                storage.clear()
            }
        }
 
 
    };
</script>
 
<style>
html,body{
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    overflow: hidden;
}
.app-main{
    width: 100%;
    height: 100%;
}
</style>

二、如果是多页面的程序的话，在每一个页面同理只要在mounted方法中，注册这个事件即可！

如何机智判断页面是刷新还是关闭，背景：vue项目，需求：关闭页面，下次直接跳到登陆页

最近项目有这么个需求：要在关闭当前系统的窗口的时候，退出登录，

因为如果不退出登录可能存在安全风险，其实我想说，电脑没事别借给别人或者离开工位记得一定要锁屏，其实我们设置了cookie失效时间的，过了一段时间会自动清空cookie。

经过我查资料，自身尝试网上的各种方法，发现都有问题。

总结这一路的尝试：

一、页面加载时只执行onload ，页面关闭时只执行onunload，页面刷新时先执行onbeforeunload，然后onunload，最后onload。

经过验证我得出的结论是：

（1）对于ie，谷歌，360：

//页面加载时只执行onload//页面刷新时，刷新之前执行onbeforeunload事件，在新页面即将替换旧页面时onunload事件，最后onload事件。//页面关闭时，先onbeforeunload事件，再onunload事件。

（2）对于火狐：

//页面刷新时，只执行onunload；页面关闭时，只执行onbeforeunload事件那么回归正题，到底怎样判断浏览器是关闭还是刷新？我按照网上的各种说法实验千百遍，都未成功，

二、机智的判断页面刷新还是关闭

关键点：刷新完成之后会执行onload方法，根据session存标志变量来清空cookie

我的思路是：刷新和关闭，无论哪个浏览器都会执行onunload方法或者onbeforeunload方法，其实我们在这两个方法里是判断不了的，但是在刷新之后会再一次执行onload方法，所以我在这两个方法里将一个标志位变量放在session里。然后在onload方法执行的时候判断session里是否有这个变量，有的话，说明是刷新，不然就是关闭。

import Cookies from 'js-cookie'

/*区分关闭和刷新，关闭退出登录 start*/
window.onload = function(){
  if(!window.sessionStorage["tempFlag"]){
    Cookies.remove('userId')
    Cookies.remove('userName')
    location.reload();   //不能省，强制跳到登陆页
  }else{
    window.sessionStorage.removeItem("tempFlag");
  }
}
window.onunload = function (){
  window.sessionStorage["tempFlag"] = true;
}
window.onbeforeunload = function (){
  window.sessionStorage["tempFlag"] = true;
}

目前项目中使用时可行的，不足的地方：一个系统的多个页面同时打开，关掉其中一个页面也会清空cookie，重新登录

谁让项目登录用的是cookie存，如果换成session存登录信息就不一样了