javascript - 如果尚未在 localStorage 中，如何将新对象推送到数组

Question

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

我能够将对象/数组推送到本地存储并将其检索回来，但是当我单击下一个项目“添加到收藏夹”时，我最终会覆盖前一个项目，而不是向数组添加新对象。

代码如下:

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

如果相同的对象尚不存在，如何更新数组？

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)));

希望这会有所帮助!