Hi guys

 

I’m looking to create a car classifieds website. Beside each listing I would like to add a “Bookmark this car” option. This is so that visually it’s easy for users to see what cars they have already looked at in the list.

 

I have looked for what seems an eternity for a suitable script and finally came across this page ( https://stackoverflow.com/questions/46067404/add-and-remove-to-favorites-in-local-storage?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa) which seemed to be the answer to my problems. I am therefore using the following script:

 

-----------------------------START-------------------------

<script type="text/javascript">

$(window).load(function(){

 

var addFav = "Bookmark this car";

var remFav = "Remove bookmark";

 

// update anchor tag text based on previous stored selections

$('.lists a').each(function(e){

 

  var favs = $(this).parent().contents().filter(function(){

    return this.nodeType == 3;

  })[0].nodeValue

 

  //console.log(favs, localStorage.getItem(favs));

 

  if (localStorage.getItem(favs) === "saved") {

      $(this).text(remFav);

    } else {

      $(this).text(addFav);

  }

});

 

 

// this function assumes that 1) <li> has at least some text outisde the <a>,

// and 2) the text is unique for every <li> - since it is used as a key in the lookup

$('.lists a').click(function(e){

 

  var favs = $(this).parent().contents().filter(function(){

    return this.nodeType == 3;

  })[0].nodeValue

 

  if (localStorage.getItem(favs) === null) {

      localStorage.setItem(favs, "saved");

      $(this).text(remFav);

    } else {

      localStorage.removeItem(favs);

      $(this).text(addFav);

  }

});

 

});

</script>

  <span class="lists"><span>Car 1 <a href="#"></a></span></span>

  <span class="lists"><span>Car 2 <a href="#"></a></span></span>

  <span class="lists"><span>Car 3 <a href="#"></a></span></span>

  <span class="lists"><span>Car 4 <a href="#"></a></span></span>

  <span class="lists"><span>Car 5 <a href="#"></a></span></span>

-----------------------------END-------------------------

 

However, instead of having text, it would be great to have a symbol of some kind. For example a heart which indicates that the car has been bookmarked and a hollow heart to show it hasn't. It would be something like in this example but they’ve used a star:

 

https://jsfiddle.net/farhadB/ocgcejg2/

 

I did try to use this script but it does not work great on mobile (iPhone)

 

Any help would be fully appreciated.

 

PS: I am an absolute JQuery beginner!”"

 

I look forward to hearing from you. Best regards

 

Rod from the UK