一、对于单页面应用，例如vue等

将window.onbeforeunload监听的方法放在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};},methods: {},mounted(){// 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据window.onbeforeunload = function (e) {var storage = window.localStorage;storage.clear()}}};
</script>

二、对于多页面应用

1、第一种方案（对于vue）

在每一个页面同理只要在mounted方法中，注册这个事件即可

2、第二种方案（对于原生js）

使用cookie作为哨兵，因为cookie默认在你关闭浏览器时会自动消失，我们就在网页打开时判断有没有cookie，如果没有，我们就清除localStorage缓存，然后再设置一个cookie，这样你不关闭浏览器，cookie一直存在，也就是你的localStorage数据会一直存在。

一个例子

//设置cookie
function setCookie(name, value, seconds) {seconds = seconds || 0;   //seconds有值就直接赋值，没有为0    var expires = "";if (seconds != 0) {      //设置cookie生存时间    var date = new Date();date.setTime(date.getTime() + (seconds * 1000));expires = "expires=" + date.toGMTString();}document.cookie = name + "=" + escape(value) + expires + "; path=/";   //转码并赋值
}
function setInof(key, value) {localStorage.setItem(key, value);setCookie(key,value)//存储localStorage的同时，也存储一个cookie来监听
}

 //取得cookie    function getCookie(name) {var nameEQ = name + "=";var ca = document.cookie.split(';'); //把cookie分割成组    for (var i = 0; i < ca.length; i++) {var c = ca[i]; //取得字符串    while (c.charAt(0) == ' ') { //判断一下字符串有没有前导空格    c = c.substring(1, c.length); //有的话，从第二位开始取    }if (c.indexOf(nameEQ) == 0) { //如果含有我们要的name    return unescape(c.substring(nameEQ.length, c.length)); //解码并截取我们要值    }}return false;}if(!getCookie('Token')){//清除localStorage.clear();}

关闭浏览器窗口的时候，如何清空localStorage的数据相关推荐

alert点击完确定关闭浏览器窗口_关务实操技巧：单一窗口缓存4大清理方法，解决部分退单问题...
前言 2018年"关检融合"之后,中国国际贸易单一窗口(下称"单一窗口")的使用范围进一步扩大.随着通关一体化.无纸化的推进,单一窗口越来越成为进出口企业关务人 ...
alert点击完确定关闭浏览器窗口_为Microsoft Edge浏览器开启标签组功能
我们在浏览器中打开的网页标签页可能很多,但这么多的标签页通常只属于某几个网站,也就是同一个网站我们可以打开好多个网页,那么如果能把这些属于同一个网站的标签页分成一组,或者能把任意几个标签页分成一组,会 ...
【Vue】关闭浏览器窗口之前弹出提示
需求:叉掉浏览器窗口,弹出提示,确认后才会关闭窗口 mounted() {window.addEventListener('beforeunload', e => this.beforeunlo ...
如何关闭页面之前清空LocalStorage
文章の目录一. 前言二.问题描述三.解决办法写在最后一. 前言在实际的Vue项目中我们为了做持久化,会使用vuex配合localstorage.cookie.等实现数据的持久化,不至于出现 ...
浏览器缓存--cookie、sessionStorage、localStorage、indexedDB
浏览器缓存–cookie.sessionStorage.localStorage.indexedDB cookie 最初用于在客户端存储会话信息服务器在响应 HTTP 请求时,向客户端发送 Set- ...
flex应用中如何关闭浏览器
在Actionscript 2及以前,要打开任何网址,只需调用全局函数getURL()即可.在Actionscript 3中,已经取消了getURL()这个全局函数,取而代之的是flash.net包中 ...
chromium 43 如何增加后台运行的插件关闭浏览器到系统托盘
增加后台运行插件有些时候,我们需要关闭浏览器窗口后,到系统托盘,确保浏览器继续运行. 如果用插件的话,只需要运行一个 background 属性的扩展即可. manifest.json 清单文件 { ...
python关闭浏览器、未过期的session_解决因为关闭浏览器造成session失效的假象
session在服务端保存信息,是否关闭浏览器和session销毁无关,即:即使关闭浏览器,session还是存在的.但是为什么关闭浏览器后session好像就消失了. 1 session和cooki ...
onbeforeunload不触发_关闭浏览器时触发onbeforeunload事件的例子
例子,onbeforeunload事件示例: 复制代码代码示例: g_blnCheckUnload = true; function RunOnBeforeUnload() { if (g_blnC ...

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