JavaScript：在选项卡之间共享数据

Question

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

Answer 1

如需更现代的解决方案，请查看https://stackoverflow.com/a/12514384/270274

引用：

我坚持使用localStorage 问题中提到的共享本地数据解决方案。就可靠性、效率和浏览器兼容性而言，它似乎是最好的解决方案。

localStorage 已在所有现代浏览器中实现。

storage 事件在 other 选项卡更改 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/客户端，
• 您只需要它在同一浏览器中的选项卡/窗口之间工作。

-> 然后使用cookies（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 时，这不是问题。

Answer 4

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

Answer 5

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

Answer 6

我只是看看 Facebook Chat 是如何做到的，他们将向服务器发出的请求保持打开状态不到一分钟。如果数据返回到服务器，则服务器将消息发送回每个打开请求。如果一分钟内没有数据返回，它会重新请求并继续执行此操作（多久，我不确定）。

Answer 7

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

Answer 8

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

Answer 9

BroadcastChannel 标准允许这样做。见MDN BroadcastChannel

// 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 10

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

Answer 11

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

如果您已经打开了两个选项卡，除非您使用 AJAX，否则更改其中的内容不会更改另一个。