我在我的网站上有一些值,我想在浏览器关闭时清除。我选择sessionStorage来存储这些值。当tab被关闭时,它们确实被清除,如果用户按f5则保留;但是如果用户在不同的标签中打开一些链接,这些值是不可用的。
我如何与我的应用程序共享所有浏览器选项卡之间的sessionStorage值?
用例:将一个值放在某个存储空间中,使该值在所有浏览器选项卡中都可访问,并在所有选项卡关闭时将其清除。
if (!sessionStorage.getItem(key)) {
sessionStorage.setItem(key, defaultValue)
}
如果您有少量的数据,您可以使用会话cookie来代替sessionStorage,该会话cookie在用户关闭浏览器或清除cookie之前一直处于活动状态。它还在多个制表符之间保存其值。
设置cookie的代码
document.cookie = "cookiename=value; path=/";
通过省略expires,我们设置了一个会话cookie。
然后像这样检索它:
function getCookie(name) {
var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
if (match) return match[2];
}
var value = getCookie('cookiename');
你可以使用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垫片。:)
文章全文如下:
http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/