浏览器sessionStorage。标签之间共享?


150

我的网站上有一些值,要在关闭浏览器时清除这些值。我选择sessionStorage存储这些值。当选项卡关闭时,它们确实被清除,并且如果用户按f5则保留;但是,如果用户在其他选项卡中打开某些链接,则这些值不可用。

如何sessionStorage在应用程序的所有浏览器选项卡之间共享值?

用例:将值存储在某个存储区中,使该值可在所有浏览器选项卡中访问,并在所有选项卡均关闭时将其清除。

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

9
对我来说很奇怪,它被关闭了。提名重新开放。另一个主题是关于“如何在多个选项卡之间进行通信”,当我开始阅读另一个主题时,这听起来也有所不同。
KajMagnus

可以使用Cookie吗?默认情况下,哪种行为类似?(但确实-为了采取行动,他们将需要进一步实施) developer.mozilla.org/en-US/docs/Web/API/Document/cookie
lingar,

Answers:


132

您可以使用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,即9)中对此进行了测试

这种方法“应该在IE8中工作”,但是由于我每次在任何网站上打开标签页...任何标签页时IE崩溃,我都无法对其进行测试。(好的IE)PS:如果您也想同时支持IE8,则显然需要包括JSON填充程序。:)

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


2
该解决方案的可靠性如何?由于它是基于事件的,因此是否有错过事件的机会?
vivek241 2015年

2
根据此处的答案,我在localStorage和sessionStorage上创建了一个库以简化此过程。所以现在您只需调用storageManager.saveSyncedSessionData('data','key'); 或storageManager.savePermanentData('data','key');等,根据您的需要。完整的代码是在这里:ebenmonney.com/blog/...
adentum

@ vivek241当JS文件较小并且上面给出的“解决方案脚本”作为页面中的第一个脚本加载时,该解决方案对我来说非常有用。当我的JS文件变得太大(例如1000行或更多行)时,它突然停止工作并删除了我的cookie和特定的localStorage数据。我不确定这是否是可靠或跨浏览器的解决方案。因此,重写所有逻辑以单独使用cookie来解决问题。
webblover

4
不会在所有先前打开的选项卡中触发事件吗?
Dtipson

3
看起来BroadcastChannel现在是执行此操作的好工具。developers.google.com/web/updates/2016/09/broadcastchannel
alexbea

71

使用sessionStorage的,这是不可能的。

MDN文档

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

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


8
好的,我知道了,但是当所有浏览器选项卡都关闭时,如何清除localStorage?
Vladimir Gordienko

您可以将文档cookie更改为path='/'强制关闭浏览器窗口时将其清除。但是对于制表符,我现在不知道。
Henrik Andersson

好吧,我会更深入地研究,让我知道是否找到了解决方案,让我们现在想想这是不可能的))
弗拉基米尔·戈尔迪年科

5
@Anmol是的,但是我已经不能提供任何代码了,那是很久以前的事情了。这是一个丑陋的解决方案,但对我来说非常有效。关键是将tabsOpened计数器保留在本地存储中,并在页面加载时增加它,但在页面卸载时减少它。因此,当页面卸载并且tabsOpen == 1时,它是最后一个标签,我们可以清除所有内容。我需要处理一些小事情,但无法记住确切的内容。希望对您有帮助!
弗拉基米尔·戈尔坚科

1
@VladimirGordienko如果localStorage由于某人导航到同一标签中的另一个域而发生删除数据的卸载事件,该怎么办。在我看来,这将错误地删除localStorage数据-选项卡没有关闭,并且如果该人向后导航,他/他将再次想要该数据。无论如何,这是一个有趣的方法,没想到:-)
KajMagnus

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

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

  2. 您可以将数据存储到localStorage几秒钟,并为storage事件添加事件侦听器。这样,您将知道何时任何选项卡都向localStorage写入了内容,并且可以将其内容复制到sessionStorage,然后清除localStorage



0

我无法通过选项卡转让sessionStorage的解决方案是创建一个localProfile并删除该变量。如果设置了此变量,但是我的sessionStorage变量没有继续并重新初始化它们。当用户注销窗口关闭时,销毁此localStorage变量


-14

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

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

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");
} 
  }

3
这个问题与javascript有关,与javascript无关。
victorpacheco3107 '16

问题是更多关于sessionStorage和localStorage的问题
RR1112,19年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.