根据Cookie在多个选项卡中更新div元素值
问题描述:
我根据cookie的值插入和移除div。 cookie的值通过选中和取消选中复选框来更新。这对单个选项卡可以正常工作。 但如何在同一页面打开多个选项卡的情况下更新其他选项卡中的div。 Cookie值更新为浏览器保持不变,但如何添加或删除与cookie值相关的div。根据Cookie在多个选项卡中更新div元素值
答
我想出了一种适用于我的方式,我使用了一个全局范围的变量来存储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>
见['的postMessage()'](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) –
请后的代码示例 –
的代码太大,无法发布 – Pratyush