Question

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

Answer 1

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

但是，如果您不需要刷新当前页面，则每次更新cookie时都会更新变量值。

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

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

Answer 2

如果您可以使用本地存储而不是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>

根据多个选项卡中的cookie更新div元素值

2 个答案: