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

49次阅读

共计 1486 个字符,预计需要花费 4 分钟才能阅读完成。

阐明

因为不同页面或标签页间无奈共享 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_…

正文完
 0