浏览器关闭时清空localStorage储存的数据浏览器关闭时清空localStorage储

说明由于不同页面或标签页间无法共享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来监听 }

【浏览器关闭时清空localStorage储存的数据】接下来就很舒服了，通过判断是否有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(); }

方案二：浏览器的windowd对象的监听事件有（对于ie/谷歌/360）：

页面加载时只执行onload;
页面刷新时，刷新之前执行onbeforeunload事件，在新页面即将替换旧页面时onunload事件，最后onload事件;
页面关闭时，先onbeforeunload事件，再onunload事件

window.onbeforeunload 事件正常，但它对于我的需求有两个问题：
1.浏览器/选项卡关闭时触发，但在刷新时也是这样（我不想）。
2.在关闭选项卡时会弹出确认框（我不想）。
window.onload，它只在刷新时触发，在tab/browser关闭时并不会触发，那在 onload 重置 localStorage，就像什么都没有发生过一样，以便实现我的需求：

window.onbeforeunload = function (e) { window.onunload = function () { window.localStorage.isMySessionActive = "false"; } return undefined; }; window.onload = function () { window.localStorage.isMySessionActive = "true"; };

在window.onbeforeunload中返回undefined，因为我不想要在选项卡/浏览器上显示确认弹出窗口关闭并刷新。
实例在vue中关闭浏览器时清除localStorage中的用户信息：
App.js:

相关：
浏览器关闭时清空localStorage储存的数据