在浏览器标签之间共享Cookie，而无需刷新javascript中的标签

Question

嗨，我正在设计一个房地产网站，并且我有很多广告，我在每个广告中都添加了一个选项，如果用户单击"add to favorites" ，则该广告的ID和网址会保存在Cookie中并在"favorite page"检索因此，用户可以在每次想要的时候查看该广告。 我的每个广告都有一个类似localhost/viewmore.php?ID=a number的地址localhost/viewmore.php?ID=a number
完全保存cookie的过程效果很好，但是最近我意识到了一些事情。 考虑我访问此地址为localhost/viewmore.php?ID=10广告之一，然后单击"add to favorite"然后如果我打开此地址为localhost/viewmore.php?ID=8另一页，然后我阅读了Cookie在"favorite page"我将看到此结果
[{"favoriteid":"10","url":"http://localhost/viewcookie.php?ID=10"},{"favoriteid":"8","url":"http://localhost/viewcookie.php?ID=8"}]
这是完全正确的，这是我所期望的。

问题

现在考虑不像以前的情况，我打开了两个广告，然后在第一个广告上单击"add to favorite" ，然后转到第二个广告（没有任何刷新），如果我读过这一次，则在第二个广告上单击"add to favorite"我在"favorite page" Cookie，我会看到此结果
[{"favoriteid":"8","url":"http://localhost/viewcookie.php?ID=8"}]
这是不正确的，我想让两个人在Cookie中看到广告的ID和网址，而不仅仅是最后一个。
ps：我使用push（）方法将新对象添加到cookie数组中，我认为每次单击后都必须对其进行更新？ 任何想法谢谢

 /* * Create cookie with name and value. * In your case the value will be a json array. */ function createCookie(name, value, days) { var expires = '', date = new Date(); if (days) { date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = '; expires=' + date.toGMTString(); } document.cookie = name + '=' + value + expires + '; path=/'; } /* * Read cookie by name. * In your case the return value will be a json array with list of pages saved. */ function readCookie(name) { var nameEQ = name + '=', allCookies = document.cookie.split(';'), i, cookie; for (i = 0; i < allCookies.length; i += 1) { cookie = allCookies[i]; while (cookie.charAt(0) === ' ') { cookie = cookie.substring(1, cookie.length); } if (cookie.indexOf(nameEQ) === 0) { return cookie.substring(nameEQ.length, cookie.length); } } return null; } function eraseCookie(name) { createCookie(name,"",-1); } var faves = new Array(); function isAlready(){ var is = false; $.each(faves,function(index,value){ if(this.url == window.location.href){ console.log(index); faves.splice(index,1); is = true; } }); return is; } $(function(){ var url = window.location.href; // current page url var favID; var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); var favID = (pair[0]=='ID' ? pair[1] :1) //alert(favID); } // this is the part i think i have to update every time without refreshing******************************* $(document.body).on('click','#addTofav',function(e){ e.preventDefault(); if(isAlready()){ } else { var fav = {'favoriteid':favID,'url':url}; faves.push(fav); } //******************************************************************************************************* var stringified = JSON.stringify(faves); createCookie('favespages', stringified); }); var myfaves = JSON.parse(readCookie('favespages')); if(myfaves){ faves = myfaves; } else { faves = new Array(); } }); 

Answer 1

您的问题是您正在查看变量faves ，该变量在文档加载时初始化，但不会随着cookie的更改而更新。

第二页查看变量，第一页看不到收藏夹，因为它实际上没有查看cookie。

然后，它只是使用其值重置Cookie。

这是完整的代码，还有聊天功能：

/* 
 * Create cookie with name and value. 
 * In your case the value will be a json array. 
 */
function createCookie(name, value, days) {
  var expires = '',
    date = new Date();
  if (days) {
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = '; expires=' + date.toGMTString();
  }
  document.cookie = name + '=' + value + expires + '; path=/';
}
/* 
 * Read cookie by name. 
 * In your case the return value will be a json array with list of pages saved. 
 */
function readCookie(name) {
  var nameEQ = name + '=',
    allCookies = document.cookie.split(';'),
    i,
    cookie;
  for (i = 0; i < allCookies.length; i += 1) {
    cookie = allCookies[i];
    while (cookie.charAt(0) === ' ') {
      cookie = cookie.substring(1, cookie.length);
    }
    if (cookie.indexOf(nameEQ) === 0) {
      return cookie.substring(nameEQ.length, cookie.length);
    }
  }
  return null;
}
/* 
 * Erase cookie with name. 
 * You can also erase/delete the cookie with name. 
 */
function eraseCookie(name) {
  createCookie(name, '', -1);
}

var faves = {
  add: function (new_obj) {
    var old_array = faves.get();

    old_array.push(new_obj);
    faves.create(old_array);
  },

  remove_index: function (index) {
    var old_array = faves.get();

    old_array.splice(index, 1);
    faves.create(old_array);
  },

  remove_id: function (id) {
    var old_array = faves.get();

    var id_index = faves.get_id_index(id);
    faves.remove_index(id_index);
  },

  create: function (arr) {
    var stringified = JSON.stringify(arr);
    createCookie('favespages', stringified);
  },

  get: function () {
    return JSON.parse(readCookie('favespages')) || [];
  },

  get_id_index: function (id) {
    var old_array = faves.get();

    var id_index = -1;
    $.each(old_array, function (index, val) {
      if (val.id == id) {
        id_index = index;
      }
    });

    return id_index;
  },

  update_list: function () {
    $("#appendfavs").empty();
    $.each(faves.get(), function (index, value) {
      var element = '<li class="' + index + '"><h4>' + value.id + '</h4> <a href="' + value.url + '">Open page</a> ' +
        '<a href="javascript:void(0);" class="remove" data-id="' + value.id + '">Remove me</a>';

      $('#appendfavs').append(element);
    });
  }
}

$(function () {
  var url = window.location.href;

  $(document.body).on('click', '#addTofav', function (e) {
    var pageId = window.location.search.match(/ID=(\d+)/)[1];

    if (faves.get_id_index(pageId) !== -1) {
      faves.remove_id(pageId);
    }
    else {
      faves.add({
        id: pageId,
        url: url
      });
    }

    faves.update_list();
  });

  $(document.body).on('click', '.remove', function () {
    var url = $(this).data('id');

    faves.remove_id(url);
    faves.update_list();
  });

  $(window).on('focus', function () {
    faves.update_list();
  });

  faves.update_list();
});