Javascript:在标签之间共享数据

Question

在浏览器中打开选项卡之间共享数据的最佳方法是什么？

Answer 1

有关更现代的解决方案,请访问/sf/answers/876006911/

引用:

我坚持使用问题中提到的共享本地数据解决方案localStorage.它似乎是可靠性,效率和浏览器兼容性方面的最佳解决方案.

localStorage 在所有现代浏览器中实现.

storage当其他选项卡进行更改时,事件将触发localStorage.这对于通信目的非常方便.

参考:
http://dev.w3.org/html5/webstorage/
http://dev.w3.org/html5/webstorage/#the-storage-event

Answer 2

如果第一个选项卡自动打开第二个选项卡,您可以执行以下操作:

第一个标签:

//open the first tab
var child_window = window.open( ...params... );

第二个标签:

// get reference to first tab
var parent_window = window.opener;

然后,您可以调用函数并在选项卡之间执行各种操作:

// copy var from child window
var var_from_child = child_window.some_var;

// call function in child window
child_window.do_something( 'with', 'these', 'params' )

// copy var from parent window
var var_from_parent = parent_window.some_var;

// call function in child window
parent_window.do_something( 'with', 'these', 'params' )

Answer 3

BroadcastChannel 标准允许这样做。请参阅MDN 广播频道

// Connection to a broadcast channel
const bc = new BroadcastChannel('test_channel');

// Example of sending of a very simple message
bc.postMessage('This is a test message.');

// A handler that only logs the event to the console:
bc.onmessage = function (ev) { console.log(ev); }

// Disconnect the channel
bc.close();

Answer 4

另请参阅另一个 StackOverflow 线程：浏览器选项卡/窗口之间的 Javascript 通信。

我认为有两种好的方法。根据您的需要，一种可能更适合您。

如果其中任何一个是真的......

• 你不能存储信息服务器端，
• 你不能发出很多http请求，
• 你只想存储一点点信息[1]，
• 你想成为纯 javascript / 客户端，
• 您只需要它在同一浏览器中的选项卡/窗口之间工作。

-> 然后使用cookie（发送时使用setCookie，接收时使用getCookie/setTimeout）。一个很好的库可以做到这一点是http://theprivateland.com/bncconnector/index.htm

如果其中任何一个是真的......

• 你想存储信息服务器端
• 您想要存储大量信息或将其存储在相关事物中（即表或多维数组[2]）
• 您还需要它跨不同的浏览器（不仅仅是同一浏览器中的选项卡/窗口之间），甚至不同的计算机/用户。

-> 然后使用 Comet（长期持有的 HTTP 请求允许 Web 服务器基本上将数据推送到浏览器）来接收数据。以及发送数据的简短 POST 请求。

Etherpad 和 Facebook Chat 目前使用 Comet 技术。

[1] 当使用 localStorage 时，显然可以存储更多数据，但由于您会依赖 cookie，因此还不能依赖于此。除非您的应用程序仅适用于现代浏览器，否则这就可以了。

[2] 复杂的数据也可以存储在 cookie 中（JSON 编码），但这不是很干净（并且需要没有 JSON.stringify/JSON.parse 的浏览器的回退方法），并且在涉及并发的场景中可能会失败。无法更新 JSON cookie 值的一个属性。您必须解析它，更改一个属性并覆盖该值。这意味着理论上可以撤消另一次编辑。同样，当使用 localStorage 时，这就不是什么问题了。