add items to favorites and see them again when ever return to website

Question

I am working on a real estate website. I have many ads in my website and I need to create a 'favorite' or 'save' button on each of the posts that will save the selected posts in a certain page for user to read later.

I want to use cookies or local storage to keep user favorites on that computer, which would allow users to add items to their favorites and see them again when they return. No account required.

Thanks to one of my friends, I wrote some code but it does not work properly - I mean it does not show any result.

BIG THANKS TO ANYONE THAT CAN HELP!

Here is my current code:

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);
  }
  $(function(){
var faves = new Array();
    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);
    });
  });

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

  <ul id="appendfavs">

  </ul>

Answer 1

I would recommend to prefer the storage of the favorites via the local storage and fall back to to cookies if local storage is no available.

So I implemented a short example how to to use the local storage based on your example.

   var chance;
   var favorites;
   var storage;

   $(document).ready(function() {
     chance = new Chance(); // Just for random hash generation
     if (window.Storage != undefined) {
       storage = window.localStorage;
       if (storage.favorites == undefined) {
         favorites = [];
       } else {
         favorites = JSON.parse(storage.favorites);
       }
       updateList();

       $('#fav').click(function() {
         addFavorite(window.location);
         updateList();
       });

       $('#list').on('click', 'li a', function() {
         deleteFavorite($(this).data('id'));
         updateList();
       });
     } else {
       // No support for local storage
       // Fall back to cookies or session based storage
     }
   });

   function addFavorite(url) {
     favorites.push({
       id: chance.hash({
         length: 15
       }),
       url: url
     });
     storage.setItem('favorites', JSON.stringify(favorites));
   }

   function deleteFavorite(id) {
     for (var i in favorites) {
       if (favorites[i].id == id) {
         favorites.splice(i, 1);
       }
     }
     storage.setItem('favorites', JSON.stringify(favorites));
   }

   function updateList() {
     $('#list').empty();
     if (typeof favorites !== 'undefined' && favorites.length > 0) {
       for (var i in favorites) {
         $('#list').append('<li>' +
           favorites[i].url.href +
           '&nbsp;&nbsp;&nbsp;&nbsp;' +
           '<a class="delete" href="#" data-id="' + favorites[i].id + '">delete</a>' +
           '</li>');
       }
     } else {
       $('#list').append('<li>Nothing stored!</li>');
     }
   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.3/chance.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="fav" href="#">Add</a>

<ul id="list">
</ul>

---

EDIT: Added JsFiddle link: https://jsfiddle.net/Wachiwi/r2r3097q/13/