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

Posted 2023-03-08

【中文标题】如何使用 jQuery 在不刷新页面的情况下更新 cookie 值？

【英文标题】：How to update cookie value without page refresh using jQuery?

【发布时间】：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>  

【参考方案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>