根据多个标签中的 cookie 更新 div 元素值答案

【问题标题】：Update div element value based on cookie in multiple tabs根据多个标签中的 cookie 更新 div 元素值
【发布时间】：2016-06-14 16:36:26
【问题描述】：

我根据 cookie 的值插入和删除 div。通过选中和取消选中复选框来更新 cookie 的值。这适用于单个选项卡。但是如果为同一页面打开多个选项卡，如何更新其他选项卡中的 div。 cookie 值会更新，因为它在浏览器中保持不变，但是如何添加或删除关于 cookie 值的 div。

【问题讨论】：

见postMessage()
请发布代码示例
代码太大，无法发布
@AdamAzad：postMessage 仅适用于从同一选项卡打开的窗口或 iframe，对吗？如果用户在多个选项卡中写入同一页面的 url，它将不起作用...
你应该使用websocket

标签： javascript jquery cookies

【解决方案1】：

如果您同意使用本地存储而不是 cookie，则可以使用 storage 事件，该事件会在本地存储发生更改时触发。

有关运行示例，请参阅 http://synccheckbox.site44.com/。代码粘贴如下：

<!doctype html>
<html>
<head>
    <style>html { font-family:Arial }</style>
</head>
<body>
    This checkbox should synchronize between open tabs:
    <input type="checkbox" id="checkbox" />

    <script>
        function updateCheckbox() {
            document.getElementById('checkbox').checked =
                (localStorage.checked === 'true');
        }
        updateCheckbox();

        document.getElementById('checkbox').addEventListener('change', function () {
            localStorage.checked = this.checked;
        });

        window.addEventListener('storage', function () {
            updateCheckbox();
        });
    </script>
</body>
</html>

【讨论】：

我们可以在php中使用本地存储吗？
我不确定你的意思。本地存储是浏览器的功能……只能在浏览器中访问。
我认为@Pratyush 想将从本地存储中获取的值操作到一些 php 变量中，并询问其可行性
是的 @Anant 我在 js 和 php 中使用我的 cookie，所以本地存储在我的情况下不起作用。
好的，所以也将它写入 cookie。

【解决方案2】：

我找到了一种对我有用的方法，我使用了一个具有全局范围的变量来存储 cookie 的值。定义了一个方法来检查cookie值是否与变量不同，刷新页面。

但是，如果您不需要刷新当前页面，则在更新 cookie 时更新变量的值。

所以基本上我正在刷新其他标签，但不是我当前的标签。我知道这不是最好的方法，但它会完成这项工作。

如果您发现更有效的内容，请发布。

【讨论】：