前端存储token踩坑实录

最近在做一个项目，前后端分离的。一开始token存储在sessionStorage中，sessionStorage有个特性，就是不能多标签页共享。

所以，后来就改为使用localStorage存储token，localStorage是可以多标签页共享的。但是，它也有个问题，就是关闭浏览器后，不能自动销毁。localStorage的信息是会永久存储在浏览器中的，除非手动清除。这也又带来了一个安全问题。

于是想到了使用onbeforeunload和unload来监听浏览器关闭事件，在关闭事件中手动清除token。可是，unload和onbeforeunload无法区分刷新和关闭，网上说的所有区分的办法，完全都不起作用。所以，这个问题卡主了。

大家可能会想到cookie，没错，后来我们也想过，使用会话级cookie可以完美的解决这个问题：多标签页共享，并且关闭浏览器的时候自动清除。

可是，我尝试以后发现，cookie多标签页共享没问题，可是关闭浏览器的时候，并没有自动销毁。虽然wschool官网以及很多资料都显示，不设置过期时间，关闭浏览器的时候cookie是可以自动销毁的，可是我测试多次，关闭浏览器，再打开，cookie信息仍然存在。

问题陷入僵局。

然而，有一次，我让同事试了一下，关闭浏览器后，那个cookie信息竟然自动销毁了。这太新奇了，于是我想到了可能是浏览器设置的问题。

没错，就是这个原因。我用的chrome浏览器，有一个设置，如下图：

浏览器设置打开时显示“继续浏览上次打开的网页”，也就是当你打开chrome浏览器的时候，会自动加载上次打开过的标签页。这个时候，关闭浏览器的时候cookie是不会自动销毁的。改为另外两个选项，比如“打开新的标签页”，可能大多数人都是选择的这个，就可以了。

至此，这个问题才算是解决了。那现在记录一下js cookie的设置：

//设置cookie, 参数 expirem 为秒
function setCookie(key, value, expirem){
    var expireDate = new Date ();
    expireDate.setTime(expireDate.getTime() + (expirem * 1000));
    document.cookie = key + "=" + value + ((expirem == null) ? "" : "; expires=" + expireDate.toUTCString());
}
//获取cookie
function getCookie(key){
    var name = key + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return '';
}
//删除cookie
function delCookie(key){
    if (getCookie(key)){
        setCookie(key, "", -1);
    }
}