猿问

浏览器会话存储。标签之间共享?

浏览器会话存储。标签之间共享?

我在我的网站中有一些值,我希望在浏览器关闭时清除,我选择sessionStorage来存储这些值,当tab关闭时清除它并在用户按f5时保持存储,但如果用户在不同的选项卡中打开一些链接这个值不可用。如何在我的应用程序的所有浏览器选项卡之间共享sessionStorage值?


用例:将值放在某个存储中,在所有浏览器选项卡中保持该值可访问,如果所有选项卡都关闭则清除它。


if (!sessionStorage.getItem(key)) {

    sessionStorage.setItem(key, defaultValue)

}


精慕HU
浏览 638回答 3
3回答

慕后森

您可以使用localStorage及其“storage”eventListener将sessionStorage数据从一个选项卡传输到另一个选项卡。此代码需要存在于所有选项卡上。它应该在您的其他脚本之前执行。//&nbsp;transfers&nbsp;sessionStorage&nbsp;from&nbsp;one&nbsp;tab&nbsp;to&nbsp;anothervar&nbsp;sessionStorage_transfer&nbsp;=&nbsp;function(event)&nbsp;{ &nbsp;&nbsp;if(!event)&nbsp;{&nbsp;event&nbsp;=&nbsp;window.event;&nbsp;}&nbsp;//&nbsp;ie&nbsp;suq &nbsp;&nbsp;if(!event.newValue)&nbsp;return;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;do&nbsp;nothing&nbsp;if&nbsp;no&nbsp;value&nbsp;to&nbsp;work&nbsp;with &nbsp;&nbsp;if&nbsp;(event.key&nbsp;==&nbsp;'getSessionStorage')&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;another&nbsp;tab&nbsp;asked&nbsp;for&nbsp;the&nbsp;sessionStorage&nbsp;->&nbsp;send&nbsp;it &nbsp;&nbsp;&nbsp;&nbsp;localStorage.setItem('sessionStorage',&nbsp;JSON.stringify(sessionStorage)); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;the&nbsp;other&nbsp;tab&nbsp;should&nbsp;now&nbsp;have&nbsp;it,&nbsp;so&nbsp;we're&nbsp;done&nbsp;with&nbsp;it. &nbsp;&nbsp;&nbsp;&nbsp;localStorage.removeItem('sessionStorage');&nbsp;//&nbsp;<-&nbsp;could&nbsp;do&nbsp;short&nbsp;timeout&nbsp;as&nbsp;well. &nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;(event.key&nbsp;==&nbsp;'sessionStorage'&nbsp;&&&nbsp;!sessionStorage.length)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;another&nbsp;tab&nbsp;sent&nbsp;data&nbsp;<-&nbsp;get&nbsp;it &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;data&nbsp;=&nbsp;JSON.parse(event.newValue); &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;key&nbsp;in&nbsp;data)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sessionStorage.setItem(key,&nbsp;data[key]); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}};//&nbsp;listen&nbsp;for&nbsp;changes&nbsp;to&nbsp;localStorageif(window.addEventListener)&nbsp;{ &nbsp;&nbsp;window.addEventListener("storage",&nbsp;sessionStorage_transfer,&nbsp;false);}&nbsp;else&nbsp;{ &nbsp;&nbsp;window.attachEvent("onstorage",&nbsp;sessionStorage_transfer);};//&nbsp;Ask&nbsp;other&nbsp;tabs&nbsp;for&nbsp;session&nbsp;storage&nbsp;(this&nbsp;is&nbsp;ONLY&nbsp;to&nbsp;trigger&nbsp;event)if&nbsp;(!sessionStorage.length)&nbsp;{ &nbsp;&nbsp;localStorage.setItem('getSessionStorage',&nbsp;'foobar'); &nbsp;&nbsp;localStorage.removeItem('getSessionStorage',&nbsp;'foobar');};我用chrome,ff,safari测试了这个,即11,即10,ie9这个方法“应该在IE8中工作”,但我无法测试它,因为我的IE每次打开一个标签时崩溃....任何标签......在任何网站上。(好的IE浏览器)PS:如果你也想要IE8支持,你显然需要包含一个JSON垫片。:)归功于这篇完整的文章:http:&nbsp;//blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/

HUWWW

使用sessionStorage此功能是不可能的。来自MDN Docs在新选项卡或窗口中打开页面将导致启动新会话。这意味着你不能在标签之间共享,为此你应该使用&nbsp;localStorage
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答