Question

我正在尝试使用数组将AJAX项存储在本地存储中，然后我可以使用循环检索它。我可以使用以下代码存储单个项目，但如果我尝试添加任何其他项目，它将删除当前存储在本地存储中的任何项目。

$('.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));
    }
});

我尝试使用saveFilm.push(saveFilm);虽然我收到错误＆＃39; saveFilm.push不是函数＆＃39;。

我希望第二个功能只是从本地存储阵列中删除当前会话存储中的电影。虽然我还没到达那个部分。

以下是收集AJAX并构建页面的代码：

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处理程序：

   $.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));
       }
    }  

}) ;

Answer 1

您没有在AJAX处理程序中添加数组。

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

使用数组将AJAX项存储在本地存储中

1 个答案: