使用 jQuery 设置 cookie 时遇到问题答案

【问题标题】：Having trouble setting cookies using jQuery使用 jQuery 设置 cookie 时遇到问题
【发布时间】：2012-07-02 20:48:30
【问题描述】：

我正在尝试使用选择框选项的值设置 cookie。我使用的 jquery.cookie.js 插件位于：https://github.com/carhartl/jquery-cookie

<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#set_state").change(function() {
        var theState = $(this).val();
        $.cookie('set_state', theState, { expires: 5, path: '/' });
    });
});
</script>
</head>
<body>
<select id="set_state" name="state">
    <option value="" selected="selected"></option>
    <option value="">None</option>
    <option value="AL">AL</option>
    <option value="AK">AK</option>
    <option value="AZ">AZ</option>
    <option value="AR">AR</option>
    <option value="CA">CA</option>
    <option value="CO">CO</option>
    <option value="CT">CT</option>
    <!-- no need to post them all here -->
</select>
</body>

如果我使用警告框显示变量theState，它可以工作，但我无法让$.cookie 函数工作......我做错了什么？

【问题讨论】：

当您说您无法让该功能“正常工作”时，究竟出了什么问题？你的意思是cookie没有被设置？当然？（检查萤火虫/蜻蜓）
是的，cookie 根本没有设置，即使我手动指定了一个值（不使用 var）。
尝试通过原生 JS 设置。如果您只是使用 $.cookie 插件来设置 cookie，那么这可能会对您网站的负载量产生不必要的影响。
@Utkanos - 在 jscompress.com 上缩小 cookie 插件时只有约 700 字节；这无关紧要（当然，除非加载了单独的请求）
@JohnRobinson - 您的浏览器的 JS 控制台是否碰巧显示任何错误？

标签： php jquery html cookies setcookie

【解决方案1】：

这里是使用 jQuery cookie 插件设置 cookie 的完整示例。

HTML：

<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src='http://codebins.com/userUploads/3/jquery.cookie.js'></script>
</head>
<body>
     <select id="set_state" name="state">
        <option value="" selected="selected"></option>
        <option value="">None</option>
        <option value="AL">AL</option>
        <option value="AK">AK</option>
        <option value="AZ">AZ</option>
        <option value="AR">AR</option>
        <option value="CA">CA</option>
        <option value="CO">CO</option>
        <option value="CT">CT</option>
        <!-- no need to post them all here -->
    </select>
    <input type="button" id="btncookie" value="get cookie" />
    <input type="button" id="btndelcookie" value="delete cookie" />
</body>

jQuery:

$(document).ready(function() {
   $("#set_state").change(function() {
       var theState = $(this).val();
       $.cookie('set_state', theState, {
           expires: 5,
           path: '/'
       });
  });
  $("#btncookie").click(function() {
      alert("Your Selected Value from Cookie is : " + $.cookie('set_state'));
  });
  $("#btndelcookie").click(function() {
       $.cookie('set_state', '', {
        expires: -1
       });
       $("#set_state").val("");
       alert('Cookie is deleted now, try to get cookie..!');
   });
});

在代码箱上试试上面的例子：http://codebins.com/codes/home/4ldqpc6

【讨论】：