根据Cookie在多个选项卡中更新div元素值

问题描述:

我根据cookie的值插入和移除div。 cookie的值通过选中和取消选中复选框来更新。这对单个选项卡可以正常工作。 但如何在同一页面打开多个选项卡的情况下更新其他选项卡中的div。 Cookie值更新为浏览器保持不变,但如何添加或删除与cookie值相关的div。根据Cookie在多个选项卡中更新div元素值

+0

见['的postMessage()'](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) –

+0

请后的代码示例 –

+0

的代码太大,无法发布 – Pratyush

我想出了一种适用于我的方式,我使用了一个全局范围的变量来存储cookie的值。定义了一个方法来检查cookie值是否与变量值不同,刷新页面。

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

所以基本上我刷新其他选项卡,但不是我当前的选项卡。我知道这不是实现这一目标的最佳方式,但它会完成这项工作。

如果您发现更有效的东西,请发布。

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

我们可以使用本地存储在PHP? – Pratyush

+0

我不确定你的意思。本地存储是浏览器功能......它只能在浏览器中访问。 – smarx

+0

我认为@Pratyush希望将从本地存储中获取的值转换为一些php变量,并询问其可行性 – Anant