Using an array to store AJAX items in local storage

Question

I am trying to use an array to store AJAX items in local storage which I can then retrieve using a loop later. I am able to store a single item using the following code, but if I try to add any other items it will remove whatever is currently in local storage.

$('.saveButton').click(function(){
    var saveFilm = JSON.parse(sessionStorage.getItem("film") || "[]");
    localStorage.setItem("save", JSON.stringify(saveFilm));
    var $this=$(this)
    $this.toggleClass("saveButton")
    if($this.hasClass("saveButton")){
        $this.text("Save")
        localStorage.removeItem("save");
    }else{
        $this.text("Saved");
        $this.addClass("pure-button savedButton")    
    }})



$('.savedButton').click(function(film){
    var film = JSON.parse(sessionStorage.getItem("film"));
    var $this=$(this)
    $this.toggleClass("saveButton")
    if($this.hasClass("saveButton")){
        $this.text("Save")
        localStorage.removeItem("save");
    }else{
        $this.text("Saved");
        $this.addClass("pure-button savedButton")
        localStorage.setItem("save", JSON.stringify(film));
    }
});

I have tried using saveFilm.push(saveFilm); although I get the error 'saveFilm.push is not a function'.

I would then like the second function to only remove the film currently in session storage from the local storage array. Though I haven't got to that part yet.

Here is the code that collects the AJAX and builds the page:

function populateContent(film)
{     

    if (localStorage.getItem("save")=== null){
        var save=0;
    }else{   
        var save =(JSON.parse(localStorage.getItem("save")));
    }
    var filmID=film.id;
    var saveID=save.id;
    $(".bannerImg").html("<img class='pure-u-5-5' src="+film.banner+"/>")
    $(".title").html('<b>Title: </b>'+film.title)
    $(".genre").html('<b>Genre: </b>'+film.genre)
    $(".director").html('<b>Director: </b>'+film.director)
    $(".release").html('<b>Release Date: </b>'+film.release)
    $(".trailer").html('<iframe class="pure-u-5-5" src="'+film.youtube+'" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>');
    $(".fa-star").slice(0, film.rating).addClass("checked");
    $(".description").html(film.description);    
    $(".saveFilm").html('<button class="pure-button saveButton">Save</button>');

    if(filmID != saveID){
    $(".saveFilm").html('<button class="pure-button saveButton">Save</button>');
    }else{
    $(".saveFilm").html('<button class="pure-button savedButton">Saved</button>');


    }

}


function init(){
    if (sessionStorage.getItem("film")=== null){
        var film = JSON.parse(localStorage.getItem("save"));
    }else{   
    var film = JSON.parse(sessionStorage.getItem("film"));

    }
    populateContent(film);

}
init();

AJAX Handler:

   $.getJSON("data/films.json",function(films){
       $.each(films, function(index,film){
            var $newLi = $('<div class="film pure-g"><img class="pure-u poster" src='+film.img+'/><div class="pure-u filmInfo"><ul class="filmList"><li><b>Title:</b>'+film.title+'</li><li><b>Genre:</b> '+film.genre+'</li><li><b>Director:</b> '+film.director+'</li><li><b>Release Date:</b> '+film.release+'</li></ul><div class="stars"><span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span></div><a href="filmDetails.html" <button class="pure-button filmButton">View Film</button></a></div>');

           $newLi.find(".stars .fa-star").slice(0, film.rating).addClass("checked");

            $newLi.on("click", createHandler(film))

            $(".showFilm").append($newLi);

            })

       });


    function createHandler(film)
    {
       return function(){
          sessionStorage.setItem("film",JSON.stringify(film));
       }
    }  

}) ;

If you're changing the class of buttons and want that to invoke different handlers, see https://stackoverflow.com/questions/16893043/jquery-click-event-not-working-after-adding-class-using-jquery — Barmar, Apr 17 '18 at 17:25
`saveFilm` is a local variable. You need to make it a global variable so it can be accessed from the AJAX code. — Barmar, Apr 17 '18 at 17:26
I still don't see any AJAX code, or code that tries to add to the local storage. — Barmar, Apr 17 '18 at 17:42
I can't figure out what's going on with the switching between `Save` and `Saved` buttons. — Barmar, Apr 17 '18 at 17:43
@Barmar, I have added the AJAX handler which is from the previous page. Once a user selects a film the AJAX data gets stored in local storage, then if the user decides to save the film I want it to save the data from session storage into an array in local storage. The reason that the save/saved classes change is because if a film is has already been saved I want the user to be able to remove the film by selecting the button again. I hope this makes it clearer. — Sam, Apr 17 '18 at 17:51

score 0 · Answer 1 · answered Apr 17 '18 at 19:18

You're not adding to the array in your AJAX handler.

function createHandler(film) {
    return function() {
        var filmArray = JSON.parse(sessionStorage.getItem("film") || "[]");
        filmArray.push(film);
        sessionStorage.setItem("film", JSON.stringify(filmArray));
    };
}

Using an array to store AJAX items in local storage

1 Answers1