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

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

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

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

if (!sessionStorage.getItem(key)) {
sessionStorage.setItem(key, defaultValue)
}
243350 次浏览
小开

使用sessionStorage来实现这一点是不可能的。

从MDN文档

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

这意味着你不能在选项卡之间共享，为此你应该使用localStorage

小开
  1. 你可以只使用localStorage并记住它在session cookie中第一次创建的日期。当localStorage "session"大于cookie的值，那么你可以清除localStorage

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

  2. 你可以将你的数据存储到localStorage中几秒钟，并为storage事件添加事件监听器。这样你就会知道任何选项卡什么时候写了一些东西到localStorage，你可以把它的内容复制到sessionStorage，然后只需要清除localStorage

小开
这是一个解决方案，以防止浏览器选项卡之间的会话剪切为java应用程序。这将适用于IE (JSP / Servlet) < / p >
  1. 在您的第一个JSP页面中，onload事件调用servlet (ajax调用)来设置一个“窗口”。标题”和会话中的事件跟踪器(只是一个第一次设置为0的整数变量)
  2. 确保其他页面都没有设置window.title
  3. 所有页面(包括第一页)添加一个java脚本，在页面加载完成后检查窗口标题。如果没有找到标题，那么关闭当前页面/选项卡(确保撤消“窗口。当发生此情况时，卸载"函数)
  4. 设置页面窗口。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");
}
}
小开
最佳答案

你可以使用localStorage和它的"storage" eventListener将sessionStorage数据从一个选项卡传输到另一个选项卡。

这段代码需要存在于ALL选项卡上。它应该先于其他脚本执行。

// 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, ie 11, ie 10, ie9中测试了这个

这个方法“应该在IE8中工作”，但我不能测试它，因为我的IE崩溃，每次我打开一个选项卡....任何选项卡……在任何网站上。(很好的IE) PS:如果你想要IE8支持，你显然需要包括一个JSON垫片。：）

Credit to this full article: http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/ < / p >

小开

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

在这个链接中，有一个很好的jsfiddle来测试它。 当跟随target="_blank"的链接时，新窗口上的sessionStorage不是空的; < / p >
小开

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

小开

如果你有少量的数据，你可以使用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');
小开

我发现在选项卡之间共享sessionStorage的唯一方法是window.open:

  • window.open('./page2.html','')打开page2与一个新标签
  • window.open('./page2.html','height=100, width=100')打开page2，在新窗口中添加新标签。

Page2可以从page1获得一个sessionStorage对象的副本，但是这两个sessionStorage对象是相互独立的。


提交答案