Question

我使用以下函数将项目保存到本地存储中的数组中。一旦存储了一个项目，我想再次选择保存按钮将其从数组中删除。目前，用户可以多次保存同一个项目。通过修改保存按钮以删除项目，用户可以轻松地删除项目，这将阻止他们多次保存相同的项目。

$('.saveButton').click(function(){
    var film = JSON.parse(sessionStorage.getItem("film"));
    var saveFilm = JSON.parse(localStorage.getItem("save") || "[]");
    saveFilm.push(film);
    localStorage.setItem("save", JSON.stringify(saveFilm));    
});

我应该如何建立这个功能以允许我这样做？

编辑：

$('.saveButton').click(function(){
    var film = JSON.parse(sessionStorage.getItem("film"));
    var saveFilm = JSON.parse(localStorage.getItem("save") || "[]");
    var arrayLength = (saveFilm.length);
    $.each(saveFilm, function(index,saveFilm){
        if(saveFilm.id===film.id){
            saveFilm.splice(saveFilm.indexOf(film), 1);
            console.log("true")
        }
        else{
            saveFilm.push(film);
            console.log("false")
        }
    localStorage.setItem("save", JSON.stringify(saveFilm));
    })
});

EDIT2：

$('.saveButton').click(function(){
var film = JSON.parse(sessionStorage.getItem("film"));
var saveFilm = JSON.parse(localStorage.getItem("save") || "[]");
var arrayLength = (saveFilm.length);
if (arrayLength>0){
    for(i=0; i<arrayLength; i++){
        if(saveFilm[i].id===film.id){
            saveFilm.splice(saveFilm.id, 1);
        }
        else{
            saveFilm.push(film);     
        }
    }
    }else{
        saveFilm.push(film);


     }
        localStorage.setItem("save", JSON.stringify(saveFilm));
});

Answer 1

基本上，您只需将值重新读取，JSON.parse()，删除元素，然后再次保存。

如果您只是将其添加到上述功能中，只需添加以下内容：

$('.saveButton').click(function(){
    var film = JSON.parse(sessionStorage.getItem("film"));
    var saveFilm = JSON.parse(localStorage.getItem("save") || "[]");

    if (!saveFilm.includes(film)) {
      saveFilm.push(film);
    } else {
      saveFilm.splice(saveFilm.indexOf(film), 1);
    }

    localStorage.setItem("save", JSON.stringify(saveFilm));    
});

如果film是一个对象，那么这不会起作用。相反，您需要使用某种键来查找元素（例如名称），而您将在数组中循环并查找。一旦找到它（或者找不到它），那么我分享的逻辑将再次起作用。

// assuming film.name is a valid unique identifier 
function getFilmIndex(films, film) {
   const film = films.find(f => f.name === film.name);
   return film ? null : films.indexOf(film);
}

Answer 2

You have to be careful when splicing from front to end. When splicing and iterating automatically (using for loop as (var i = 0; i < arr.length; i++)) what ends up happening is if you have duplicates back-to-back then you will skip the duplicate.

var arr = [1, 2, 2, 3, 4], toRemove = 2;

for(var i = 0; i < arr.length; i++){
  if(arr[i] === toRemove)
    arr.splice(i, 1);
}

console.log(arr);

What happens is you get rid of the first 2, move the second where that 2 was but starting looking at 3. There are 2 ways prevents this:

1. Manually iterate i when you do not splice an element

var arr = [1, 2, 2, 3, 4], toRemove = 2;

for(var i = 0; i < arr.length;){
  if(arr[i] === toRemove){
    arr.splice(i, 1);
  }else{
    i++;
  }
}

console.log(arr);

2. Itererate in reverse order (preferred way)

var arr = [1, 2, 2, 3, 4], toRemove = 2;

for(var i = arr.length - 1; i > 0; i--){
  if(arr[i] === toRemove)
    arr.splice(i, 1);
}

console.log(arr);

从数组中删除特定项

2 个答案: