浏览器sessionStorage。 共享标签？

我在我的网站有一些值，我想清除浏览器是closures时，我selectsessionStorage存储该值，它清除时，选项卡closures，并保持存储，如果用户按f5，但如果用户打开某些链接在不同的选项卡此值不可用。 我怎样才能与我的应用程序共享所有浏览器选项卡之间的sessionStorage值？

用例：将值存储在某个存储中，在所有浏览器选项卡中保留该值，并在所有选项卡closures时将其清除。

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

任何人都可以检查我的问题吗？ 我的问题被标记为重复的，但实际上相关的问题被问了2年前，但我的3年去，也是这个问题更受欢迎，所以我认为它的错误标记。 任何人都可以解决这个问题，或只是回答为什么发生这种情况？ 谢谢。

Answer 1

您可以使用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来testing这个，例如11，即10，ie9

这种方法“应该工作在IE8”，但我无法testing它，因为我的IE浏览器崩溃，每当我打开一个标签….任何标签…在任何网站上。 （好的IE浏览器）PS：如果你想IE8的支持，你显然需要包括一个JSON填充。 🙂

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

Answer 2

使用sessionStorage这是不可能的。

从MDN文档

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

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

Answer 3

1. 您可以使用localStorage并记住它在session cookie首次创build的date。 当localStorage “会话”比cookie的值localStorage您可以清除localStorage

   这样做的好处是，在浏览器closures之后，有人仍然可以读取数据，所以如果您的数据是私密的，那么这不是一个好的解决scheme。

2. 您可以将数据存储到localStorage几秒钟，并为storage事件添加事件侦听storage 。 这样你会知道什么时候任何选项卡写入localStorage东西，你可以将其内容复制到sessionStorage ，然后清除localStorage

Answer 4

实际上，在其他方面，如果用_blank打开，只要在打开父项时打开选项卡，就会保留sessionStorage：

在这个环节，有一个很好的testing它。 sessionStorage在新窗口不是空的，当跟着target =“_ blank”的链接时，

Answer 5

我的解决scheme没有sessionStorage可以通过制表符转移是创build一个localProfile和轰炸这个variables。 如果这个variables被设置，但是我的sessionStoragevariables不能继续并重新初始化它们。 当用户注销窗口closures时，销毁这个localStoragevariables

Answer 6

这是一个解决scheme，以防止Java应用程序的浏览器选项卡之间的会话剪切。 这将适用于IE（JSP / Servlet）

1. 在你的第一个JSP页面中，onload事件调用一个servlet（ajex调用）来在会话中设置一个“window.title”和事件跟踪器（只是一个整数variables，第一次被设置为0）
2. 确保没有其他页面设置window.title
3. 页面加载完成后，所有页面（包括第一页）都会添加一个java脚本来检查窗口标题。 如果没有find标题，closures当前页面/标签（确保在发生这种情况时撤消“window.unload”function）
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"); } }