Cookie 和多个浏览器窗口/选项卡答案

【问题标题】：Cookies and multiple browser windows/tabsCookie 和多个浏览器窗口/选项卡
【发布时间】：2012-02-17 22:58:10
【问题描述】：

我正在尝试在浏览器窗口/选项卡之间共享一些信息，但由于浏览器支持问题，我对 HTML5 本地存储持怀疑态度。一些谷歌搜索让我相信 cookie 可以用于此，所以我抓住 jquery.cookie 并设置了一个简单的测试。

加载时写入cookie的两个页面：

$.cookie("testValue", new Date().getTime());

还有一个按钮，在每个警报中显示 cookie 值：

alert($.cookie("testValue"));

在测试时，我在每个页面上看到不同的值，这让我相信这不起作用，但我一直在这里和其他地方看到人们似乎在推荐它的帖子，所以我想知道是否我只是做错了什么？

【问题讨论】：

听起来您在用当前时间覆盖之前从未尝试读取页面上的 cookie。如果是这样，为什么结果会一样？
测试是，在选项卡 1 中加载页面，在选项卡 2 中加载页面。因此 cookie 应该具有选项卡 2 设置的值。当我单击选项卡 1 和选项卡 2 时，我看到不同的值按钮。我想要的是在两个页面上查看选项卡 2 的值。
那就是问题所在。您确实在尝试读回 cookie 值之前对其进行覆盖。 加载页面 1. 设置 Cookie。阅读饼干。加载页面 2。设置 Cookie。读取 cookie。
我不认为我们沟通得很好；) 当我单击 Page1 上的按钮时，我仍然看到 Page1 的 cookie 值。同样，Page2 向我展示了它的价值。我想要的是两个页面都具有最新的（Page2）值。所以我希望 page2 覆盖 page1 的 cookie。这不会发生。
另外，这只是客户端的事情。 cookie 不是来自服务器。

标签： jquery html cookies jquery-cookie

【解决方案1】：

Cookies 仅在 JavaScript 环境中由 JS 设置或页面加载时更新。

localStorage 就是为此而设计的。 IE8支持就好了，只有真正老的IE7及以下不支持。虽然 IE9 仅适用于 Windows-Vista 和 7，但 IE8 在 XP 上很好，因此您应该可以毫不费力地要求仍在使用过时浏览器的用户进行更新。

（我不能这么说，但 IE 确实需要像所有其他浏览器一样的自动更新程序......）

【讨论】：

这是一个企业应用，必须支持IE7。你是什么意思他们只在由JS设置时更新？这不就是我在这里做的吗？
我的意思是它们仅在当前窗口中通过在该窗口中设置来更新。必须重新加载其他窗口才能看到更改。我会用您可能更感兴趣的解决方案添加另一个答案。
所以需要重新加载。这就是我以为我会结束的地方，只是在寻找确认。
查看我的其他答案 - 我认为它很好地解决了这个问题:)
@lamont 你可以重新加载iframe。

【解决方案2】：

DateTime() 未定义。请改用Date()。

$.cookie("testValue", new Date().getTime());

无论如何，它对我有用。这是一个简单的html页面：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>  
  <script type='text/javascript' src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
  <script type='text/javascript'>
    $(window).load(function(){
        $("#get").click(function(){
            alert($.cookie("testValue"));
        });
        $("#set").click(function(){
            $.cookie("testValue", new Date().getTime());
        });
    });
  </script>
</head>
<body>
  <a id="get" href="#">get cookie</a>
  <a id="set" href="#">set cookie</a>
</body>
</html>

使用 FireFox 10.0 在 localhost 中尝试过。

【讨论】：

大声笑我是从内存中输入代码的，C# 肌肉记忆接管了。我已经更正了。
加载两个标签并尝试。你会得到两个不同的值。

【解决方案3】：

尝试第二次=P

试试这样的：

<iframe id="cookies" src="refresher.html" style="display: none"; />
<script type="text/javascript">
    (function() {
        var ifr = document.getElementById('cookies');
        setInterval(function() {
            var cd = ifr.contentDocument.cookie.split(";");
                l = cd.length, i, k, ret = {};
            for( i=0; i<l; i++) {
                k = cd[i].split("=");
                k[0] = k[0].replace(/^ +| +$/g,'');
                k[1] = k[1].replace(/^ +| +$/g,'');
                ret[k[0]] = k[1];
            }
            window.cookiedata = ret;
        },5000);
    })();
</script>

刷新器.html：

<script type="text/javascript">setTimeout(function() {location.reload();},5000);</script>

您仍然可以使用 jQuery $.cookie 来设置 cookie，但要获取它们，您现在使用 cookiedata.cookiename。

将5000 调整为在响应性和重新加载数据之间看起来不错的折衷。

【讨论】：

谢谢。请不要把这个当成个人——我知道这是浏览器“防火墙”的产物——但这看起来很可怕；）
这可能是因为我拒绝使用 jQuery，所以你觉得这很丑:p 我个人觉得 jQuery 很丑，但我猜每个人都有自己的感觉？