我的网站上有一些值,要在关闭浏览器时清除这些值。我选择sessionStorage
存储这些值。当标签被关闭,他们确实被清除,并保持如果用户按下F5; 但是,如果用户在其他选项卡中打开某些链接,则这些值不可用。
如何sessionStorage
在应用程序的所有浏览器选项卡之间共享值?
用例:将值存储在某个存储区中,使该值可在所有浏览器选项卡中访问,并在所有选项卡均关闭时将其清除。
if (!sessionStorage.getItem(key)) {
sessionStorage.setItem(key, defaultValue)
}
您可以使用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(即11,即10,即9)中对此进行了测试
这种方法“应该在IE8中工作”,但是由于我每次在任何网站上打开标签页...任何标签页时IE崩溃,我都无法对其进行测试。(好的IE)PS:如果您也想同时支持IE8,则显然需要包括JSON填充程序。:)
感谢这篇完整的文章:http :
//blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/
使用sessionStorage
的,这是不可能的。
在新标签或窗口中打开页面将导致启动新会话。
这意味着您不能在标签之间共享,为此您应该使用 localStorage
-
您可以使用它
localStorage
并记住它的首次创建日期session cookie
。如果localStorage
“会话”早于Cookie的值,则可以清除localStorage
这样做的缺点是,在关闭浏览器后,仍然有人可以读取数据,因此,如果您的数据是私密的和保密的,这不是一个好的解决方案。
-
您可以将数据存储到
localStorage
几秒钟,并为storage
事件添加事件侦听器。这样,您将知道何时任何选项卡都向localStorage
写入了内容,并且可以将其内容复制到sessionStorage
,然后清除localStorage
实际上,在其他地方,如果使用_blank打开,则只要打开父级时打开选项卡,它就会保留sessionStorage:
在此链接中,有一个不错的jsfiddle对其进行测试。
当跟随带有target =“ _ blank”的链接时,新窗口上的sessionStorage不为空
我的解决方案不是让sessionStorage可以通过选项卡进行转移,是创建一个localProfile并删除该变量。如果设置了此变量,但我的sessionStorage变量没有继续并重新初始化它们。当用户注销窗口关闭时,销毁此localStorage变量
这是防止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");
}
}
文章标签:cross-browser , javascript , session-storage
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!