我在我的网站上有一些值,我想在浏览器关闭时清除。我选择sessionStorage来存储这些值。当tab被关闭时,它们确实被清除,如果用户按f5则保留;但是如果用户在不同的标签中打开一些链接,这些值是不可用的。

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

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

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

当前回答

为此使用sessionStorage是不可能的。

来自MDN文档

在一个新的选项卡或窗口中打开一个页面将导致一个新的会话 启动。

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

其他回答

为此使用sessionStorage是不可能的。

来自MDN文档

在一个新的选项卡或窗口中打开一个页面将导致一个新的会话 启动。

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

You can just use localStorage and remember the date it was first created in session cookie. When localStorage "session" is older than the value of cookie then you may clear the localStorage Cons of this is that someone can still read the data after the browser is closed so it's not a good solution if your data is private and confidental. You can store your data to localStorage for a couple of seconds and add event listener for a storage event. This way you will know when any of the tabs wrote something to the localStorage and you can copy its content to the sessionStorage, then just clear the localStorage

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

In your first JSP page, onload event call a servlet (ajex call) to setup a "window.title" and event tracker in the session(just a integer variable to be set as 0 for first time) Make sure none of the other pages set a window.title All pages (including the first page) add a java script to check the window title once the page load is complete. if the title is not found then close the current page/tab(make sure to undo the "window.unload" function when this occurs) Set page window.onunload java script event(for all pages) to capture the page refresh event, if a page has been refreshed call the servlet to reset the event tracker.

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

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

在这个链接中,有一个很好的jsfiddle来测试它。 当跟随target="_blank"的链接时,新窗口上的sessionStorage不是空的

我的解决方案是创建一个localProfile并关闭这个变量。如果这个变量设置了,但我的sessionStorage变量没有继续并重新初始化它们。当用户登出窗口关闭时,销毁这个localStorage变量