如何使用 JQuery、Javascript cookie？答案

【问题标题】：how to use JQuery, Javascript cookies?如何使用 JQuery、Javascript cookie？
【发布时间】：2026-02-10 17:30:01
【问题描述】：

我目前正在创建一个简单的待办事项列表，如果有人可以帮助我处理 cookie，我将不胜感激 :)

我有 2 个函数来设置和获取 cookie：

function setCookie(key, value) {
   var expires = new Date();
   expires.setTime(expires.getTime() + 31536000000); 
   document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
}

function getCookie(key) {
   var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
   return keyValue ? keyValue[2] : null;
}

有一个按钮（id 为 #add_todo ）可以将任务添加到待办事项列表中（类 .todo_list ）。我将文本输入 $('#todo_description').val() 的值设置为 cookie。

$(document).ready( function() {  
$('#add_todo').click( function() {

    setCookie('test', $('#todo_description').val()); 
    var todoDescription = $('#todo_description').val();

    $('.todo_list').prepend(
        div class="todo"
            +checkbox              //I avoided html brackets here
            + getCookie('test')
            +delete_button
            /div
        );
});

一切正常，但是当我重新加载网页时，我之前添加的任务没有显示，我知道我做错了。我想存储包含 todoDescription、复选框、删除按钮和样式的整个 div (class="todo")。我尝试将任务存储在数组中，但无法一一检索其元素..提前致谢！

【问题讨论】：

标签： jquery

【解决方案1】：

尝试将整个标记块存储到 cookie 中可能不是一个好主意。 Cookie 更适合存储小型 sn-ps 数据。

我尝试将任务存储在数组中，但无法逐个检索其元素

是什么阻止您遍历数组？

无论如何，这里可能存在一个基本的设计缺陷，即您不应该尝试将大量数据存储到 cookie 中。 Cookie 只能保存几千字节的数据。考虑将实际数据存储在另一个容量更大的存储中。这是做网站的吗？如果有后端，那么应该存储在后端的数据库中，cookie数据只是用来认证和区分用户。

【讨论】：

【解决方案2】：

最简单的答案是使用a plugin like Mr. Hartl's jQuery cookies（我经常使用这个）。

<script src="jquery.cookies.js"></script>
<script>
   // of course, you no longer need these functions, but just plugging this into your example...

   function setCookie(key, val) {
      var expires = new Date().getTime() + 31536000000;
      $.cookie( key, val, { expires: expires, path: '/' } );
   }

   function getCookie(key) {
      return $.cookie(key);
   }
</script>

如果您需要重新发明千篇一律，您可能想在您的问题中解释这一点。

【讨论】：

或者干脆var getCookie = $.cookie;