【前端新手之路-第一天】如何实现两个标签页中的通讯？

http://www.codesec.net/view/467836.html

如何避免打开同一个页面时，要多次登录。同页面，但是打开了两个。

在这篇文章中，我了解并复习到了。Cookie，sessionstorage，localstorage。认识如下：

cookie,兼容性很好，但是大概4kb.同时，cookie可以永久存在，也可以再回话结束后结束。要就关闭标签页回话立即结束时，不要用cookie，因为它还很有可能会存在一段时间，即使是session-cookie。

Sessionstorage:不支持跨标签页共享数据。比如，每次新开启一个标签页都要求用户重新登录。

Localstorage:此处作者用localstorage事件来解决这个问题。思路：当打开一个新的标签页的时候，先询问是否有sessionstorage。如果有，现有标签页通过localstorage事件向新页面传递sessionstorage，新页面获取后设置。

在标签页中有如下代码

(function()
{
    If(!sessionStorage.length)
    {//新打开的标签页，sessionStorage
        localStorage.setItem("getsessionStorage",Date().now);
        //触发storage事件，新旧页面都会监听
        window.addEventListener("storage",add);

        function add(event)
        {
            if(event.key =="getsessionStorage")
            {
                以下操作对已有页面
                localStorage.setItem("sessionStorage",JSON.stringify(sessionStorage));
                localStorage.removeItem("sessionStorage");
            }
            else if(event.key=="sessionStorage"&& !sessionStorage.length){
                var data=JSON.parse(event.newValue);
                for(var key in data){
                    sessionStorage.setItem(key,data[key]);
                }

            }
        }
        ;
    }
})()

不同的标签页

方法一

第一个页面设置cookie

用document.cookie=”name=”+name;

第二个页面获得

function getCookie(key) {
    return JSON.parse("{\""+document.cookie.replace(/;\s+/gim,",").replace(/=/gim,":")+"\"}");//g,全局  i忽略大小写 m多行搜索
}
setInterval(getCookie(key),1000);

方法二

利用localstorage设值传递。

localStorage.setItem(key,value);