Question

在浏览器中打开标签页之间共享数据的最佳方法是什么？

Answer 1

要获得更现代化的解决方案，请查看https://stackoverflow.com/a/12514384/270274

引用：

我坚持使用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

另请参阅另一个StackOverflow线程：Javascript communication between browser tabs/windows。

在我看来，有两种好的方法。根据你的需要，你可能会更适合你。

如果其中任何一个：你

无法存储信息服务器端
无法发出多少http请求
只想存储一点信息[1]
想成为纯粹的javascript /客户端
只需要在同一浏览器中的标签/窗口之间工作

- ＆GT;使用cookies（setCookie用于发送，getCookie / setTimeout用于接收）。这样做的好库是http://theprivateland.com/bncconnector/index.htm

如果其中任何一个：你

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

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

Etherpad和Facebook Chat也使用Comet技术。

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

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

Answer 4

我能想到的唯一方法：与服务器进行持续的ajax通信，以报告其他选项卡上的任何用户操作。

Answer 5

如何使用cookie在一个选项卡中存储数据并在另一个选项卡中进行轮询？我还不知道如果在标签之间共享一个cookie，但现在只是一个想法......

Answer 6

我刚刚看了一下Facebook Chat是如何做到这一点的，他们向服务器保持开放请求的时间少于一分钟。如果数据返回到服务器，则服务器然后将消息发送回每个打开的请求。如果一分钟内没有数据回来，它会重新请求并继续执行此操作（多长时间，我不确定）。

Answer 7

鉴于这些选项卡是打开的，其中包含相同的站点，您可以考虑构建一个ajax脚本，将用户操作报告给服务器，并将其与另一个读取该报告并在当前窗口中反映它们的ajax脚本耦合。

Answer 8

如果数据很小，你可以使用AJAX（正如其他人所建议的那样）或cookie。有关Cookie的乐趣，请参阅http://www.quirksmode.org/js/cookies.html。

Answer 9

执行此操作的一种方法是不要让聊天窗口依赖于选项卡。将选项卡作为单独的AJAX组件加载，重新加载时不会影响聊天组件。

Answer 10

根据要求，您还可以使用Cookie /会话。但是，这意味着只能在每个选项卡的第一页加载时访问数据。

如果你已经打开了两个标签，那么除非你使用一些AJAX，否则在一个标签中更改内容不会改变另一个标签。

Javascript：在标签之间共享数据

10 个答案: