将多个 ID 保存到一个 jQuery cookie 并稍后检索所有值

Question

我正在 WordPress 上构建一个图片库，我想添加一个保存到灯箱或保存到收藏功能，以便我可以通过单击一个按钮来收集图片，然后稍后将所有图片下载为 zip。它有点像购物车，但实际上并没有购买你想要的东西。我希望它只是每个会话类型的东西，这样您就不需要注册到该站点。

所以在我的图片页面上，我放了一个保存到灯箱按钮，我想将此图片的 ID 保存到一个 cookie，然后我继续向其中添加图片，直到我完成并单击一个查看灯箱按钮将列出我收集的所有图像。

我知道如何设置 cookie，但我不知道如何向其附加值。

    function saveLightbox(ID){
      $.cookie('the_cookie', ID, { expires: 7 });
      document.getElementById("result").innerHTML = $.cookie('the_cookie');
    }

这是fiddle 我希望它的大致工作方式。

Answer 1

要将值附加到 jQuery cookie，首先您必须启用对象存储。然后初始化一个保存 cookie 内容的变量。如果 cookie 为空，则初始化一个空数组。接下来，将 ID 推送到数组。最后，将此数组存储在 cookie 中。

以下代码说明了上面所说的内容：

function saveLightbox(ID){

  $.cookie.json = true;

  var idContainer = ($.cookie('the_cookie')) || [];

  idContainer.indexOf(ID) === -1 && idContainer.push(ID);

  $.cookie('the_cookie', idContainer, { expires: 7 });

  document.getElementById("result").innerHTML = $.cookie('the_cookie');

}

要考虑的另一件事是，一旦 ID 已存储在 cookie 中，您可能希望阻止再次添加它，这就是第 4 行的原因。您可以在此处找到工作示例：jsfiddle.

Answer 2

保存一个数组并将 id 推送到该数组：

var ids = $.cookie('the_cookie') || [ ];

function saveLightbox(ID){
  $.cookie('the_cookie', ids.push(ID), { expires: 7 });
  console.debug(ids);
  console.debug($.cookie('the_cookie'));
  document.getElementById("result").innerHTML = JSON.stringify($.cookie('the_cookie'));
}

（无法测试或演示 atm，jsfiddle 不可用（对我而言）。）