浏览器会话存储。标签之间共享?

时间:2013-12-02 10:16:52

标签: javascript cross-browser session-storage

我的网站中有一些值,我希望在浏览器关闭时清除,我选择sessionStorage来存储这些值,当tab关闭时它会清除,如果用户按f5则保持存储,但如果用户打开不同的链接选项卡此值不可用。我如何在我的应用程序之间共享所有浏览器选项卡之间的sessionStorage值?

用例:将值放入某个存储中,在所有浏览器选项卡中保持该值可访问,如果所有选项卡都已关闭,则清除该值。

if (!sessionStorage.getItem(key)) {
    sessionStorage.setItem(key, defaultValue)
}

7 个答案:

答案 0 :(得分:104)

您可以使用localStorage及其"存储" eventListener将sessionStorage数据从一个选项卡传输到另一个选项卡。

此代码需要存在于所有选项卡上。它应该在你的其他脚本之前执行。

// transfers sessionStorage from one tab to another
var sessionStorage_transfer = function(event) {
  if(!event) { event = window.event; } // ie suq
  if(!event.newValue) return;          // do nothing if no value to work with
  if (event.key == 'getSessionStorage') {
    // another tab asked for the sessionStorage -> send it
    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
    // the other tab should now have it, so we're done with it.
    localStorage.removeItem('sessionStorage'); // <- could do short timeout as well.
  } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
    // another tab sent data <- get it
    var data = JSON.parse(event.newValue);
    for (var key in data) {
      sessionStorage.setItem(key, data[key]);
    }
  }
};

// listen for changes to localStorage
if(window.addEventListener) {
  window.addEventListener("storage", sessionStorage_transfer, false);
} else {
  window.attachEvent("onstorage", sessionStorage_transfer);
};


// Ask other tabs for session storage (this is ONLY to trigger event)
if (!sessionStorage.length) {
  localStorage.setItem('getSessionStorage', 'foobar');
  localStorage.removeItem('getSessionStorage', 'foobar');
};

我用chrome,ff,safari测试了这个,即11,即10,ie9

这种方法&#34;应该适用于IE8&#34;但我无法测试它,因为我的IE每次打开一个标签时崩溃....任何标签......在任何网站上。 (好的IE浏览器)PS:如果你也想要IE8支持,你显然需要包含一个JSON垫片。 :)

归功于这篇完整的文章: http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/

答案 1 :(得分:61)

使用sessionStorage是不可能的。

来自MDN Docs

  

在新标签页或新窗口中打开页面将导致新会话   启动。

这意味着您无法在标签之间共享,为此您应该使用localStorage

答案 2 :(得分:8)

  1. 您可以使用localStorage并记住session cookie中首次创建的日期。当localStorage“会话”早于Cookie的值时,您可以清除localStorage

    缺点是,有人在浏览器关闭后仍然可以读取数据,因此如果您的数据是私密且有信心的话,这不是一个好的解决方案。

  2. 您可以将数据存储到localStorage几秒钟,并为storage事件添加事件监听器。通过这种方式,您可以知道任何标签何时向localStorage写了一些内容,然后您可以将其内容复制到sessionStorage,然后清除localStorage

答案 3 :(得分:6)

实际上在查看其他区域时,如果您使用_blank打开它,只要您在父级打开时打开选项卡,它就会保留sessionStorage:

在这个链接中,有一个很好的jsfiddle来测试它。 sessionStorage on new window isn't empty, when following a link with target="_blank"

答案 4 :(得分:0)

我没有将sessionStorage转移到标签上的解决方案是创建一个localProfile并打开这个变量。如果设置了此变量但我的sessionStorage变量不会继续并重新初始化它们。当用户注销窗口关闭时,销毁此localStorage变量

答案 5 :(得分:0)

如果您有少量数据,您可以使用 sessionStorage 代替 session cookie,它会一直保持活动状态,直到用户关闭浏览器或清除 cookie。并且它还可以在多个选项卡之间保留其值。

设置cookie的代码

document.cookie = "cookiename=value; path=/";

通过省略 expires,我们设置了一个 session cookie

然后你像这样检索它:

function getCookie(name) {
  var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  if (match) return match[2];
}

var value = getCookie('cookiename');

答案 6 :(得分:-10)

这是一个防止java应用程序的浏览器选项卡之间会话剪切的解决方案。这适用于IE (JSP / Servlet的)

  1. 在你的第一个JSP页面中,onload事件调用一个servlet(ajex调用)在会话中设置一个“window.title”和事件跟踪器(只是一个第一次设置为0的整数变量)
  2. 确保其他任何页面都没有设置window.title
  3. 页面加载完成后,所有页面(包括第一页)都会添加一个java脚本来检查窗口标题。如果找不到标题,则关闭当前页面/标签(确保在发生这种情况时撤消“window.unload”功能)
  4. 设置页面window.onunload java脚本事件(对于所有页面)捕获页面刷新事件,如果页面已刷新,则调用servlet重置事件跟踪器。
  5. 1)第一页JS

    BODY onload="javascript:initPageLoad()"
    
    function initPageLoad() {
        var xmlhttp;
    
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {                           var serverResponse = xmlhttp.responseText;
                top.document.title=serverResponse;
            }
        };
                    xmlhttp.open("GET", 'data.do', true);
        xmlhttp.send();
    
    }
    

    2)所有页面的通用JS

    window.onunload = function() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {             
                var serverResponse = xmlhttp.responseText;              
            }
        };
    
        xmlhttp.open("GET", 'data.do?reset=true', true);
        xmlhttp.send();
    }
    
    var readyStateCheckInterval = setInterval(function() {
    if (document.readyState === "complete") {
        init();
        clearInterval(readyStateCheckInterval);
    }}, 10);
    function init(){ 
      if(document.title==""){   
      window.onunload=function() {};
      window.open('', '_self', ''); window.close();
      }
     }
    

    3)web.xml - servlet映射

    <servlet-mapping>
    <servlet-name>myAction</servlet-name>
    <url-pattern>/data.do</url-pattern>     
    </servlet-mapping>  
    <servlet>
    <servlet-name>myAction</servlet-name>
    <servlet-class>xx.xxx.MyAction</servlet-class>
    </servlet>
    

    4)servlet代码

    public class MyAction extends HttpServlet {
     public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        Integer sessionCount = (Integer) request.getSession().getAttribute(
                "sessionCount");
        PrintWriter out = response.getWriter();
        Boolean reset = Boolean.valueOf(request.getParameter("reset"));
        if (reset)
            sessionCount = new Integer(0);
        else {
            if (sessionCount == null || sessionCount == 0) {
                out.println("hello Title");
                sessionCount = new Integer(0);
            }
                              sessionCount++;
        }
        request.getSession().setAttribute("sessionCount", sessionCount);
        // Set standard HTTP/1.1 no-cache headers.
        response.setHeader("Cache-Control", "private, no-store, no-cache, must-                      revalidate");
        // Set standard HTTP/1.0 no-cache header.
        response.setHeader("Pragma", "no-cache");
    } 
      }