Local Storage using JavaScript/jQuery to store the favorites from the list and show the favorites list when the user clicks the favorites tab

50
October 22, 2019, at 7:10 PM

I am having a PHP page where the list loads from the database. I am having a star icon near each item on clicking the icon changes color and that will be stored in the local storage. I want to show the favorites list when the user clicks the favorites tab.

If you see the code below, I want to save the favs in section home and show them when the user clicks the section my-apps. The local storage is storing the data but I am not able to pull them and show in another tab.

HTML Code:

<div class="tabs-content"> 
   <section class="content active hidden" id="home"> 
      <table class="" id="application_list"> 
       <tr><td class="app_name"><span class="fas fa-star gray cursor"></span><a href="" target="_blank">Test1</a></td></tr>
<tr><td class="app_name"><span class="fas fa-star gray cursor"></span><a href="" target="_blank">Test2</a></td></tr>
<tr><td class="app_name"><span class="fas fa-star gray cursor"></span><a href="" target="_blank">Test3</a></td></tr>
       </table>
   <section>
<section class="content" id="my-favs" onclick="restoreData()"> 
    <p>Will be list of fav applications.</p> 
    <div class="fav_app_name" id="result"></div> 
   </section>
</div>
<script>
$('.fav-app span').each(function(e){
var favs = $(this).next().contents().filter(function(){
    return this.nodeType == 3;
  })[0].nodeValue
  if (localStorage.getItem(favs) === "saved") {
 $( this ).addClass( "gold" );
    } else {
$( this ).removeClass( "gold" );
  }
});
$('.fav-app span').click(function(e){
var favs = $(this).next().contents().filter(function(){
    return this.nodeType == 3;
  })[0].nodeValue
  if (localStorage.getItem(favs) === null) {
    localStorage.setItem(favs, JSON.stringify("saved"));
$( this ).addClass( "gold" );
    } else {
    localStorage.removeItem(favs);
//    $(this).text(addFav);
$( this ).removeClass( "gold" );
  }
});
function restoreData(){
    document.getElementById("result").value = JSON.parse(localStorage.getItem('favs'));
}
</script>
Answer 1

You don't need to use localStorage.getItem('name'). You can call the content of the local storage with localStorage['name']. For example:

function restoreData(){
    document.getElementById("result").value = JSON.parse(localStorage['favs']);
}
READ ALSO
show and hide spinner with jquery : does not work on Iphone, safary etc

show and hide spinner with jquery : does not work on Iphone, safary etc

I am trying to show / hide a spinner with JQueryBasicaly I have this code :

50
Using beforeSend and complete in every instance of ajaxForm globally

Using beforeSend and complete in every instance of ajaxForm globally

I am trying to use the beforeSend and complete functions on all ajaxForms in a projectI would like to do this without adding the exact bit a code all throughout the project

25
Convert a SQL query to Laravel Eloquent

Convert a SQL query to Laravel Eloquent

I'm trying to achieve something like the following:

42
Does jquery success function assume status code 200?

Does jquery success function assume status code 200?

In an ajax success function, is it assumed the status code is 200? or could it be successful if you return 304 or 503?

29