关闭浏览器窗口的时候,如何清空localStorage的数据
一、对于单页面应用,例如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();
}