关于前端:浏览器关闭时清空localStorage储存的数据

阐明

因为不同页面或标签页间无奈共享sessionStorage的信息，所以将我的项目中登录状态存于localStorage中。

需要

须要在用户敞开浏览器时，将localStorage中存储的数据革除。

解决方案及思路

对于ie，谷歌，360：

• 页面加载时只执行onload;
• 页面刷新时，刷新之前执行onbeforeunload事件，在新页面行将替换旧页面时onunload事件，最初onload事件;
• 页面敞开时，先onbeforeunload事件，再onunload事件

一开始想到了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();
  }

————————————————
版权申明：本文为CSDN博主「月半不是胖~」的原创文章，遵循CC 4.0 BY-SA版权协定，转载请附上原文出处链接及本申明。
原文链接：https://blog.csdn.net/weixin_…