根据 cookie 或本地存储在收藏列表中保存收藏页面答案

【问题标题】：save a favorite page in collection list based on cookies or local storage根据 cookie 或本地存储在收藏列表中保存收藏页面
【发布时间】：2016-06-15 09:29:25
【问题描述】：

<!DOCTYPE html>
<html>
<head>
  <title>New page name</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script>
  /*
  * 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 = new Array();
  $(function(){
    var url = window.location.href; // current page url
    $(document.body).on('click','#addTofav',function(e){
      e.preventDefault();
      var pageTitle = $(document).find("title").text();
      var fav = {'title':pageTitle,'url':url};
      faves.push(fav);
      var stringified = JSON.stringify(faves);
      createCookie('favespages', stringified);
      location.reload();
    });
    $(document.body).on('click','.remove',function(){
      var id = $(this).data('id');
      faves.splice(id,1);
      var stringified = JSON.stringify(faves);
      createCookie('favespages', stringified);
      location.reload();
    });

     var myfaves = JSON.parse(readCookie('favespages'));
     faves = myfaves;
    $.each(myfaves,function(index,value){
      var element = '<li class="'+index+'"><h4>'+value.title+'</h4> <a href="'+value.url+'">Open page</a>  '+
      '<a href="javascript:void(0);" class="remove" data-id="'+index+'">Remove me</a>';
      $('#appendfavs').append(element);
    });
  });
  </script>
</head>
<body>

  <a href="javascript:void(0);" id="addTofav">Add me to fav</a>

  <ul id="appendfavs">

  </ul>
</body>
</html>

我需要在我的房地产网站上的每个帖子上创建一个“收藏”或“保存”按钮，以便以后保存选定的帖子。在 Ebay、Autotrader 等网站上，这似乎是一个非常标准的功能。我想使用 cookie 或本地存储将用户收藏夹保存在该计算机上，这将允许用户将项目添加到他们的收藏夹，并在他们返回时再次看到它们.无需帐户。

【问题讨论】：

标签： javascript

【解决方案1】：

您可以使用 javascript 和 jQuery 轻松完成此操作。使用以下代码将用户所在的页面添加到收藏夹并将其保存在 cookie 中，然后获取保存为收藏夹的页面列表。

我为你制作了一个完整的文件，你可以在里面玩，在文件中我为adding page、list pages、remove page创建了功能，看看吧。

<!DOCTYPE html>
<html>
<head>
  <title>New page name</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script>
  /*
  * 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 = new Array();
  $(function(){
    var url = window.location.href; // current page url
    $(document.body).on('click','#addTofav',function(e){
      e.preventDefault();
      var pageTitle = $(document).find("title").text();
      var fav = {'title':pageTitle,'url':url};
      faves.push(fav);
      var stringified = JSON.stringify(faves);
      createCookie('favespages', stringified);
      location.reload();
    });
    $(document.body).on('click','.remove',function(){
      var id = $(this).data('id');
      faves.splice(id,1);
      var stringified = JSON.stringify(faves);
      createCookie('favespages', stringified);
      location.reload();
    });

     var myfaves = JSON.parse(readCookie('favespages'));
     faves = myfaves;
    $.each(myfaves,function(index,value){
      var element = '<li class="'+index+'"><h4>'+value.title+'</h4> <a href="'+value.url+'">Open page</a>  '+
      '<a href="javascript:void(0);" class="remove" data-id="'+index+'">Remove me</a>';
      $('#appendfavs').append(element);
    });
  });
  </script>
</head>
<body>

  <a href="javascript:void(0);" id="addTofav">Add me to fav</a>

  <ul id="appendfavs">

  </ul>
</body>
</html>

页面将如下所示：

createCookie 这个函数会在用户的浏览器中创建一个指定名字的新cookie，在你的例子中名字是：favespages，你可以使用任何你想要的名字。它有 3 个参数，现在我使用 2 个参数：name 和 value，name 用于 cookie 的名称，value 用于存储我们所有收藏页面的页面 json 对象。 days 参数用于指定您正在创建的特定 cookie 的到期期限。

readCookie这个函数用于从用户的浏览器中获取 cookie，该浏览器存储了他的收藏页面。如果用户在 favespages cookie 中没有任何页面，那么它将为空。从 cookie 获取字符串后，我需要将该字符串转换回 json 对象以打印页面列表。所以为此我使用JSON.parse(readCookie('favespages'));

为了更熟悉这个概念，你必须玩弄代码，看看当你在此处更改某些内容时会发生什么。

【讨论】：

非常感谢您的回答，我在理解这段代码时遇到了问题，能否请您解释一下您再次使用的功能，谢谢
例如这个函数做什么exactky function createCookie(name, value, days)
@user6362236 createCookie ，在用户浏览器中创建具有指定名称的cookie，或者如果具有该名称的cookie已经存在，那么它将更新cookie和我们添加的新值。我已经对函数进行了评论，现在让你知道这个函数在做什么
非常感谢您的解释。我单击将我添加到收藏，但没有任何反应，此收藏结果保存了哪个页面。我的意思是我认为我必须指定一个我最喜欢的页面去的目标页面并保存在那里？
这将使用它的 url 添加到您所在的页面。