如果尚未在 localStorage 中，如何将新的 object 推送到阵列

Question

我正在尝试实现一个简单的“添加到收藏夹”功能，但不能完全让事情在本地存储中工作。

我可以将对象/数组推送到本地存储并取回它，但是当我单击下一项“添加到收藏夹”时，我最终会覆盖前一项，而不是向数组添加新的 object。

下面的代码：

 const push1 = async (movieId, movieName, image) => {
    const stringId = JSON.stringify(movieId);
    const stringName = JSON.stringify(movieName);
    const stringImage = JSON.stringify(image);

    // our array
    let moviesList = [];

    // our object
    let movies = {
      movieId: stringId,
      movieName: stringName,
      image: stringImage
    };

    moviesList.push(movies);

    // storing our array as a string
    localStorage.setItem("movieList", JSON.stringify(moviesList));

    let updatedMoviesList = [];

    const retrievedMovies = localStorage.getItem("movieList");
    const parseRetrievedMovies = JSON.parse(retrievedMovies);
    console.log("retrievedMovies: ", retrievedMovies);
    console.log("parseRetrievedMovies: ", parseRetrievedMovies);
    parseRetrievedMovies.push(movies);
};

如果相同的 object 不存在，我该如何更新阵列？

Answer 1

可能您可以使用Set()代替，它可以帮助您将独特的电影存储在localStorage中。

尝试如下：

 const stringId = '12'; const stringName = 'Name'; const stringImage = '<img-url>'; const moviesList = new Set(); const movie = { movieId: stringId, movieName: stringName, image: stringImage }; moviesList.add(JSON.stringify(movie)); console.log('first attempt', JSON.parse(Array.from(moviesList))); moviesList.add(JSON.stringify(movie)); console.log('second attempt', JSON.parse(Array.from(moviesList)));

我希望这有帮助！

Answer 2

检查 object 是否已经在使用array.some检索电影，并且只有在不存在时才推送它。

const retrievedMovies = localStorage.getItem("movieList");
if(retrievedMovies) {
   const parseRetrievedMovies = JSON.parse(retrievedMovies);
   console.log("retrievedMovies: ", retrievedMovies);
   console.log("parseRetrievedMovies: ", parseRetrievedMovies);
   const movieExists = parseRetrievedMovies.some((m) => movies.movieId === m.movieId ))
   if(!movieExists) {
      parseRetrievedMovies.push(movies);
   }
}

Answer 3

您的 function 没有读取旧设置。 相反，您从一个新的空数组开始：

let moviesList = [];

在这里，您可以改为加载上次保存的数据，如下所示：

let moviesList = localStorage.getItem("movieList");

然后通过添加新电影来修改它，然后保存，就像你已经在做的那样。

希望这可以帮助。