jquery cookie插件/读写cookie

Question

我已经使用jquery cookie插件构建了几个函数，我在跨页面工作时遇到了问题。

我有设置cookies的set.html页面，和显示页面的show.html。每次有人查看set.html时，cookie中都会添加随机密钥值对。

当我记录数据时，set.html看起来像是正确地设置和存储了cookie，但是当我转到show.html时，只检索到第一个键/值。我尝试使用path，它仍然不起作用。

function savePage(ID, name){
  deleteAllCookies();
  $.cookie.json = true;
  var idContainer = ($.cookie('the_cookie_key_3')) || [];
  var idContainerVal = ($.cookie("the_cookie_key_val_3")) || {};
  console.log(typeof idContainer);
  console.log(idContainerVal);
  if (idContainer.indexOf(ID) === -1) { idContainer.push(ID); idContainerVal[ID] = name;}

  $.cookie('the_cookie_key_3', idContainer, { expires: 40});
  $.cookie('the_cookie_key_val_3', idContainerVal, { expires: 40 });
    console.log(idContainerVal);
}

function getSavedPages(){
    $.cookie.json = true;
    var idContainer = ($.cookie('the_cookie_key_val_3')) || {};
    console.log(idContainer);
    return idContainer;
} 

Answer 1

我没有使用jquery cookie，而是使用了组合cookie和本地存储。以下是代码

if (!window.localStorage) {
  window.localStorage = {
    getItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
    },
    key: function (nKeyId) {
      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
    },
    setItem: function (sKey, sValue) {
      if(!sKey) { return; }
      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
      this.length = document.cookie.match(/\=/g).length;
    },
    length: 0,
    removeItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
      this.length--;
    },
    hasOwnProperty: function (sKey) {
      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
    }
  };
  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
}


function getSavedPages() {
  var page = window.localStorage.getItem('hashStoreKeyValues');
  if(page==null){
   return [];
  } 
    var idContainer = JSON.parse(unescape(page));
    return  idContainer;
}

function savePage(ID, name) {

   var currentStatus =  JSON.parse(unescape(window.localStorage.getItem('hashStoreKeys')));
   var currentStatusValues =  JSON.parse(unescape(window.localStorage.getItem('hashStoreKeyValues')));
   if(currentStatus == null){
      currentStatus = [];
   } 

   if(currentStatusValues == null){
      currentStatusValues = {};
   } 

   if (currentStatus.indexOf(ID) === -1) { 
      currentStatus.push(ID); 
      currentStatusValues[ID] = name;
   }
   window.localStorage.setItem("hashStoreKeys", JSON.stringify(currentStatus));
   window.localStorage.setItem("hashStoreKeyValues", JSON.stringify(currentStatusValues));
}

Answer 2

在第二个函数中，不要向$.cookie()传递任何参数。你告诉它给你the_cookie_key_val_3。

此外，第4行(以及类似的第5行)应该是这样的：

var idContainer = $.cookie('the_cookie_key_3') || '';

因为$.cookie(string)的结果返回一个JSON字符串或undefined。

当然，在生产环境中使用代码之前，请删除所有console.log()语句！

Answer 3

您将cookie设置为过期的时间太短。因此，它不能存活足够长的时间来在其他页面中捕获它。

使用cookie保存数据可能很棘手。根据我的经验，它只在我开始运行服务器时打开的页面上工作。不要使用cookies，而要使用localStorage。LocalStorage允许您设置键和值。

localStorage.setItem("data", the_cookie_key_3)

其中键是数据，值是the_cookie_key_3

You can retrieve the data by using localStorage.getItem("data");