浏览器会话存储。在标签之间共享？
Posted
技术标签:
【中文标题】浏览器会话存储。在标签之间共享？【英文标题】：browser sessionStorage. share between tabs? 【发布时间】：2013-12-18 00:16:39 【问题描述】：我的网站中有一些值要在关闭浏览器时清除。我选择sessionStorage 来存储这些值。 When tab is closed they are indeed cleared, and kept if the user presses f5;但是，如果用户在不同的选项卡中打开某个链接，这些值将不可用。
如何在我的应用程序的所有浏览器选项卡之间共享sessionStorage 值？
用例：将一个值放入某个存储中，让该值在所有浏览器选项卡中都可访问，并在所有选项卡都关闭时将其清除。
if (!sessionStorage.getItem(key))
sessionStorage.setItem(key, defaultValue)
【问题讨论】：
这对我来说很奇怪，因为它被关闭了。提名复工。另一个主题是关于“如何在多个选项卡之间进行通信”，当我开始阅读另一个主题时，这听起来不同，也不同。 可以使用cookies吗？默认情况下，哪些行为是这样的？ （但实际上 - 对于 get 和 set 操作，他们需要进一步实施）developer.mozilla.org/en-US/docs/Web/API/Document/cookie 显然，在某个时间点，sessionStorage 在标签之间保持同步：***.com/questions/19867599/… 如果您在这个线程上，您可能还会想知道 sessionStorage 的原始用例是什么？见：***.com/questions/8498357/… 【参考方案1】：您可以使用 localStorage 及其“存储”事件监听器将 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、ie 11、ie 10、ie9中测试过这个
这种方法“应该在 IE8 中工作”，但我无法测试它，因为我的 IE 每次打开标签时都会崩溃......任何标签......在任何网站上。 （好的 ol IE） PS：如果你也想要 IE8 支持，你显然需要包含一个 JSON shim。 :)
感谢这篇完整的文章： http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/
【讨论】：
这个解决方案的可靠性如何？既然是基于事件的，有没有可能错过一个事件？ 根据这里的答案，我在 localStorage 和 sessionStorage 上创建了一个库来简化这一点。所以现在你只需调用 storageManager.saveSyncedSessionData('data', 'key');或 storageManager.savePermanentData('data', 'key'); 等根据您的需要。完整代码在这里：ebenmonney.com/blog/… 不会在所有之前打开的标签页中触发事件吗？ 看起来BroadcastChannel 现在是执行此操作的好工具。 developers.google.com/web/updates/2016/09/broadcastchannel
这不是一个糟糕的解决方案，因为所有监听 localStorage 更改的选项卡都可以读取您的 sessionStorage？如果您以这种方式让自己变得脆弱，那么使用 SessionStorage 的全部意义何在？就像是的，这是可行的，但在某种程度上你只是使用本地存储而不是会话。【参考方案2】：
使用sessionStorage 是不可能的。
来自MDN Docs
在新选项卡或窗口中打开页面将导致新会话 启动。
这意味着你不能在标签之间共享，为此你应该使用localStorage
【讨论】：
好的，我知道了，但是当所有浏览器选项卡都关闭时，如何清除 localStorage？ 您可以将文档 cookie 更改为path='/'，从而在浏览器窗口关闭时强制清除它。但是对于标签，我现在不知道。
@Anmol 是的，但我不能提供任何代码，那是很久以前的事了。这是一个丑陋的解决方案，但它非常适合我。关键是将 tabsOpened 计数器保留在本地存储中，并在页面加载时增加它，但在页面卸载时减少。因此，当页面卸载和 tabsOpen == 1 它的最后一个选项卡时，我们可以清除所有内容。有一些小事情我需要处理，但不记得到底是什么。希望对你有帮助！
@VladimirGordienko 如果删除 localStorage 数据的卸载事件发生，因为有人在同一个选项卡中导航到不同的域。在我看来，这会错误地删除 localStorage 数据——选项卡没有关闭，如果该人返回导航，他/她会再次想要数据，对吧。无论如何，这是一个有趣的方法，没想到:-)
如果您右键单击 Chrome 中的标签并单击“复制”，sessionStorage 实际上在原始标签和复制标签之间共享。【参考方案3】：
实际上看其他区域，如果您使用 _blank 打开它，只要您在父项打开时打开选项卡，它就会保留 sessionStorage：
在这个链接中，有一个很好的 jsfiddle 可以测试它。 sessionStorage on new window isn't empty, when following a link with target="_blank"
【讨论】：
这在 Chrome 89 后不起作用 - developer.chrome.com/blog/deps-rems-89 - 停止克隆 sessionStorage 以用于使用 noopener 打开的窗口【参考方案4】：您可以只使用localStorage 并记住它在session cookie 中首次创建的日期。当localStorage "session" 比 cookie 的值更旧时，您可以清除 localStorage
这样做的缺点是关闭浏览器后仍然有人可以读取数据，因此如果您的数据是私密且机密的，这不是一个好的解决方案。
您可以将数据存储到localStorage 几秒钟，然后为storage 事件添加事件侦听器。这样您就可以知道任何选项卡何时向localStorage 写入了内容，您可以将其内容复制到sessionStorage，然后只需清除localStorage
【讨论】：
【参考方案5】：我不让 sessionStorage 通过选项卡传输的解决方案是创建一个 localProfile 并关闭这个变量。如果设置了此变量，但我的 sessionStorage 变量没有继续并重新初始化它们。当用户注销窗口关闭时，销毁这个 localStorage 变量
【讨论】：
当用户关闭标签页时如何销毁localStorage【参考方案6】：如果您有少量数据，您可以使用 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');
【讨论】：
【参考方案7】：我发现在标签之间共享 sessionStorage 的唯一方法是window.open：
window.open('./page2.html','') 使用新标签打开 page2
window.open('./page2.html','height=100, width=100') 在新窗口中使用新标签打开 page2。
Page2 可以从 page1 获取 sessionStorage 的副本，但是这两个 sessionStorage 对象是相互独立的。
【讨论】：
【参考方案8】：这是一种防止 Java 应用程序的浏览器选项卡之间的会话剪切的解决方案。这将适用于 IE (JSP/Servlet)
-
在您的第一个 JSP 页面中，onload 事件调用一个 servlet（ajex 调用）以在会话中设置“window.title”和事件跟踪器（第一次设置为 0 的整数变量）
确保没有其他页面设置 window.title
一旦页面加载完成，所有页面（包括第一页）都会添加一个 java 脚本来检查窗口标题。如果找不到标题，则关闭当前页面/标签（确保在发生这种情况时撤消“window.unload”功能）
设置页面 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");
【讨论】：
这个问题是关于javascript的，与javascript无关。 这个问题更多的是关于 sessionStorage 和 localStorage以上是关于浏览器会话存储。在标签之间共享？的主要内容，如果未能解决你的问题，请参考以下文章