blocks|key|187910|text|您可以使用localStorage及其“存储”eventListener将sessionStorage数据从一个选项卡传输到另一个选项卡。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|187911|此代码需要存在于所有选项卡上。它应该在你的其他脚本之前执行。|187912|//+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');
};|code-block|syntax|javascript|187913|我在chrome，ff，safari，ie+11，ie+10，ie9中测试过|187914|这个方法“应该可以在IE8中工作”，但我无法测试它，因为我的IE在每次打开选项卡时都会崩溃……任何标签...在任何网站上。(好的IE)+PS:如果你也想要IE8支持，你显然需要包含一个JSON填充。:)|187915|归功于这篇全文：http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/|offset|length|187916|entityMap|0|LINK|mutability|MUTABLE|url|http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/^0|0|0|0|0|0|8|2W|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

You can use localStorage and its "storage" eventListener to transfer sessionStorage data from one tab to another. 

This code would need to exist on ALL tabs. It should execute before your other scripts.

<pre><code>// 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 -&gt; send it
 localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
 // the other tab should now have it, so we're done with it.
 localStorage.removeItem('sessionStorage'); // &lt;- could do short timeout as well.
 } else if (event.key == 'sessionStorage' &amp;&amp; !sessionStorage.length) {
 // another tab sent data &lt;- 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');
};
</code></pre>

I tested this in chrome, ff, safari, ie 11, ie 10, ie9

This method "should work in IE8" but i could not test it as my IE was crashing every time i opened a tab.... any tab... on any website. (good ol IE) PS: you'll obviously need to include a JSON shim if you want IE8 support as well. :)

Credit goes to this full article:
<a href="http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/">http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/</a>

blocks|key|187968|text|实际上，看看其他区域，如果你用_blank打开，它会一直保留sessionStorage，只要你在打开父标签的时候打开标签：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|187969|在这个链接中，有一个很好的jsfiddle来测试它。sessionStorage+on+new+window+isn't+empty,+when+following+a+link+with+target="_blank"|offset|length|187970|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/17297287/sessionstorage-on-new-window-isnt-empty-when-following-a-link-with-target-bl^0|0|Q|2C|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

Actually looking at other areas, if you open with _blank it keeps the sessionStorage as long as you're opening the tab when the parent is open:

In this link, there's a good jsfiddle to test it.
<a href="https://stackoverflow.com/questions/17297287/sessionstorage-on-new-window-isnt-empty-when-following-a-link-with-target-bl">sessionStorage on new window isn&#39;t empty, when following a link with target=&quot;_blank&quot;</a>

blocks|key|187997|text|我的解决方案是创建一个localProfile并去掉这个变量，这样就不能让sessionStorage在标签上传输了。如果这个变量被设置了，但是我的sessionStorage变量没有被设置，那么就继续重新初始化它们。当用户注销窗口关闭时，请销毁此localStorage变量|type|unstyled|depth|inlineStyleRanges|entityRanges|data|187998|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

My solution to not having sessionStorage transferable over tabs was to create a localProfile and bang off this variable. If this variable is set but my sessionStorage variables arent go ahead and reinitialize them. When user logs out window closes destroy this localStorage variable

blocks|key|4693931|text|如果你有少量的数据，你可以使用一个session+cookie来代替cookie，它会一直保持活动，直到用户关闭他们的浏览器或者清除他们的cookie。并且它还可以在多个选项卡中保留它的值。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4693932|设置cookie的代码|4693933|document.cookie+=+"cookiename=value;+path=/";|code-block|syntax|javascript|4693934|通过省略expires，我们设置了一个session+cookie。|4693935|你可以像这样检索它：|4693936|function+getCookie(name)+{
++var+match+=+document.cookie.match(new+RegExp('(%5E%7C+)'+%2B+name+%2B+'=([%5E;]%2B)'));
++if+(match)+return+match[2];
}

var+value+=+getCookie('cookiename');|4693937|entityMap^0|H|E|0|0|0|4|7|J|E|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|14|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|S|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|T|$]]

If you have a small amount of data you can use instead of <code>sessionStorage</code> a <code>session cookie</code> which remains active until the user closes their browser or clears their cookies. And it also preserves its value among multiple tabs.
A code to set a cookie
<pre><code>document.cookie = &quot;cookiename=value; path=/&quot;;
</code></pre>
By omitting <code>expires</code> we set a <code>session cookie</code>.
And you retrieve it like this:
<pre><code>function getCookie(name) {
 var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
 if (match) return match[2];
}

var value = getCookie('cookiename');
</code></pre>

I have some values in my site which I want to clear when the browser is closed. I chose <code>sessionStorage</code> to store those values. When tab is closed they are indeed cleared, and kept if the user presses f5; But if the user opens some link in a different tab these values are unavailable.

How I can share <code>sessionStorage</code> values between all browser tabs with my application?

The use case: put a value in some storage, keep that value accessible in all browser tabs and clear it if all tabs are closed.

<pre><code>if (!sessionStorage.getItem(key)) {
 sessionStorage.setItem(key, defaultValue)
}
</code></pre>

browser sessionStorage. share between tabs?

JSON

我在我的网站中有一些值，我想在浏览器关闭时清除它们。我选择了sessionStorage来存储这些值。当选项卡关闭时，如果用户按下f5，这些值确实会被清除并保留；但如果用户在不同的选项卡中打开某个链接，这些值将不可用。如何在应用程序的所有浏览器选项卡之间共享sessionStorage值？用例:将一个值放入一些存储中，...

问浏览器sessionStorage。在选项卡之间共享？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问浏览器sessionStorage。在选项卡之间共享？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问浏览器sessionStorage。在选项卡之间共享？
EN