说明
由于不同页面或标签页间无法共享sessionStorage的信息,所以将项目中登录状态存于localStorage中。
需求
需要在用户关闭浏览器时,将localStorage中存储的数据清除。
解决方案及思路
一开始想到了onunload方法,性子急直接撸上去
window.onunload=()=>{
localStorage.clear();
}
试了试还挺好使,美滋滋的去改下一个bug~~~也是心大#24,
没过多久胖胖用F5刷新了下页面,一脸懵逼!!跳到登录页直接,由于onunload在咱们浏览器刷新或关闭时都会调用,所以!在胖胖刷新页面时,将用户的登录状态给清掉了。(我的锅我的锅)
既然onunload行不通,那咱们就将cookie与localStorage结合一下子。
- cookie在退出浏览器时会自动清除;
- 我们就在设置localStorage时同时设置一个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来决定是否删除我们的localStorage
//取得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();
}
OK!问题圆满解决!希望可以帮到看到此文的你(▽)。我是胖胖,不瘦回150斤不改名字的男人!!!关于本文有什么不妥的地方,欢迎留言批评和指正,感谢!感谢!感谢!