window.name跨域通讯小坑一记

工作中有这么一个需求，在支付完成之后，延迟3秒跳转到商户的广告页面。在广告页面通过返回按钮，可以再次返回到支付完成的详情页面，但此时延迟3秒后不会再次跳转到商户广告页面。

很明显，需要存一个标记，表示是否已经跳转过了。当时觉得window.name应该就可以胜任这个任务。

window.name

我们在js里面随时可以获取window对象，window对象有一个name属性，如下所示：

这个name属性代表了这个窗口的名称，可以读取和设置，大小不超过2MB。最重要的是，name在这个窗口（注意是窗口，不是浏览器）关闭之前，内容会一直保存着。跨域的两个地址，都可以读取到这个name值，那么跨域问题就很巧妙的被绕过去了。另外网站不论如何跳转，只要没有被修改过，返回后都可以继续读取到这个值。

然后回到我们的问题，我可以将跳转标记存到name属性里面，那么从商户广告返回来之后，如果跳转标记已经有值了，说明已经跳转过了，那么就不允许再跳了。测试代码如下：

 /*要跳转的网址*/
    var hrefUrl="https://www.baidu.com";
    /*间隔的时间*/
    var time = 3000;
    
    /*跳转方法*/
    function jump(hrefUrl,time) {
        if (window.name === "jumped") {
            console.log("已经跳转过了，不需要进行再次跳转")
        } else {
            window.name = "jumped";
            setTimeout(function () {
                window.location.href = hrefUrl;
            }, time);
        }
    }

    window.onload = function () {
        jump(hrefUrl,time);
    };

代码在pc上、安卓手机、低版本ios（10及以下）上都运行很好，在ios11却不停的跳转。经过断点debug，发现window.name被清空了，看来高版本的safari干了坏事。
因此window.name是一个比较鸡肋的功能了，如果要跨域，可以使用jsonp的方式。如果仅仅是存一个标记，可以使用sessionStorage或者localStorage。这里我采用了sessionStorage存储跳转标记。

 /*要跳转的网址*/
    var hrefUrl="https://www.baidu.com";
    /*间隔的时间*/
    var time = 3000;

    /*跳转方法*/
    function jump(hrefUrl,time) {
        if (window.sessionStorage.getItem('jumped') === "jumped") {
            console.log("已经跳转过了，不需要进行再次跳转")
        } else {
            window.sessionStorage.setItem('jumped','jumped');
            setTimeout(function () {
                window.location.href = hrefUrl;
            }, time);
        }
    }

    window.onload = function () {
        jump(hrefUrl,time);
    };

localStorage存储是永久的，没有过期时间，必须要自己remove掉内容，比较麻烦。sessionStorage的存储有效期是窗口打开期间，清除时机是在会话结束。会话结束是在用户关闭标签页或者关闭窗口的时候。即使网址变过，只要重新输入，sessionStorage都可以恢复。但是手动新开一个标签或窗口时，会新开会话，即使链接一样，也不会共享sessionStorage。sessionStorage在同一个域下，是共享的。

从商户广告跳转回来后，重新输入了地址，sessionStorage恢复了，因此可以继续获取到跳转标记，同样可以判断是否已经跳转过了，问题也得到了解决。但是要明白一点，商户页面肯定是获取不到sessionStorage的内容的，因为不在同一个域。

2019.9.23 记
使用sessionStorage的时候，发现华为p20第一次跳转后返回，标记并没有保存下来，导致再跳转了一次。第二次跳转返回后，读取到了标记，才没有再跳转了。最后使用了sessionStorage+window.name组合的方式。
如果可以的话，使用localStorage可能会更方便点，我这里没有办法清除掉localStorage内容，所以没有采用。