我的网站中有一些值，我想在关闭浏览器时清除它们。我选择sessionStorage存储这些值。关闭选项卡时，确实会清除它们，如果用户按下F5，请保留；但是，如果用户在不同的选项卡中打开某个链接，这些值将不可用。
如何sessionStorage在我的应用程序的所有浏览器选项卡之间共享值？
用例：将一个值放在某个存储中，保持该值在所有浏览器选项卡中可访问，并在所有选项卡关闭时清除它。
if (!sessionStorage.getItem(key)) {
sessionStorage.setItem(key, defaultValue)
}
您可以使用 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 每次打开标签时都会崩溃......任何标签......在任何网站上。(good ol IE) PS：如果你还想要 IE8 支持，你显然需要包含一个 JSON shim。:)
归功于这篇完整的文章：http: //blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/
实际上查看其他区域，如果您使用 _blank 打开它，只要您在父项打开时打开选项卡，它就会保留 sessionStorage：
在这个链接中，有一个很好的 jsfiddle 来测试它。 关注带有 target="_blank" 的链接时，新窗口上的 sessionStorage 不为空
您可以使用localStorage并记住它首次创建的日期session cookie。当localStorage“会话”比 cookie 的值旧时，您可以清除localStorage
这样做的缺点是在浏览器关闭后仍然有人可以读取数据，因此如果您的数据是私人和机密的，这不是一个好的解决方案。
您可以将数据存储localStorage几秒钟，然后为storage事件添加事件侦听器。这样，您将知道任何选项卡何时向 写入localStorage内容，您可以将其内容复制到sessionStorage，然后只需清除localStorage
我不让 sessionStorage 通过选项卡传输的解决方案是创建一个 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','')使用新标签打开 page2window.open('./page2.html','height=100, width=100')在新窗口中使用新选项卡打开 page2。Page2 可以从 page1 获取 sessionStorage 的副本，但是这两个 sessionStorage 对象是相互独立的。
这是防止Java应用程序的浏览器选项卡之间的会话剪切的解决方案。这适用于 IE (JSP/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");
}
}