如何使用 jQuery 在不刷新页面的情况下更新 cookie 值？答案

【问题标题】：How to update cookie value without page refresh using jQuery?如何使用 jQuery 在不刷新页面的情况下更新 cookie 值？
【发布时间】：2012-04-06 04:38:05
【问题描述】：

我目前正在使用 jQuery Cookies 插件，根据查看者点击页面的哪一侧，会应用 cookie：

<div id="leftClick">Click Me</div>
<div id="rightClick">Click Me</div>

问题是一旦 cookie 被存储，它不会在没有刷新的情况下更新。因此，如果查看者单击右侧元素，但在刷新页面之前，然后跟随左侧元素，它仍会报告 right_，尽管 cookie 已被 _left 覆盖，因为页面尚未刷新。有没有办法在不刷新页面的情况下实时读取 cookie？

<script type="text/javascript">
    var readCookie = $.cookie('whichSide');
    $(document).ready(function() {
       $('#leftClick').click(function(){
        $.cookie('whichSide', 'left_');
      }); 
    $('#rightClick').click(function(){
        $.cookie('whichSide', 'right_');
      });
    $('#login').click(function(){
        _gaq.push(['_trackEvent', 'viewerChose', readCookie+'side']);
    });   
  });  
</script>

【问题讨论】：

标签： jquery session-cookies

【解决方案1】：

这是因为您将 cookie 的值存储在 readCookie 变量中。当您更新 cookie 时，此变量不会自动更新，这就是您在引用它时获取旧值的原因。

你可能想要这样的东西：

$('#login').click(function(){
    _gaq.push(['_trackEvent', 'viewerChose', $.cookie('whichSide')+'side']);
});

【讨论】：

【解决方案2】：

您只读取一次 readCookie 值，然后在 .click 函数中使用该值。尝试在点击事件中读取它，以便您使用最新的值：

$('#login').click(function(){
    var readCookie = $.cookie('whichSide');
    _gaq.push(['_trackEvent', 'viewerChose', readCookie+'side']);
});

【讨论】：

【解决方案3】：

在您自己缓存 cookie 的值时，将其从您的代码中删除。

var readCookie = $.cookie('whichSide');

将您的代码更改为这样，您每次在 $("#login").click() 处理程序中需要它时都会获得一个新的 cookie 值副本，而不是引用以前保存的值：

<script type="text/javascript">
    $(document).ready(function() {
       $('#leftClick').click(function(){
        $.cookie('whichSide', 'left_');
      }); 
    $('#rightClick').click(function(){
        $.cookie('whichSide', 'right_');
      });
    $('#login').click(function(){
        _gaq.push(['_trackEvent', 'viewerChose', $.cookie('whichSide')+'side']);
    });   
  });  
</script>

【讨论】：