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

【问题标题】：How to push a new object to an array if not already in localStorage如果尚未在 localStorage 中，如何将新对象推送到数组
【发布时间】：2020-04-06 07:43:21
【问题描述】：

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

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

代码如下：

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

如果同一个对象不存在，我如何更新数组？

【问题讨论】：

localhost.getItem 返回 null 是什么都没有。只是在推送之前检查它。也不需要前 3 行 -> const stringId = JSON.stringify(movieId); .创建完整的普通对象，然后在添加到本地主机之前进行字符串化。

标签： javascript arrays reactjs ecmascript-6 local-storage

【解决方案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)));

我希望这会有所帮助！

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

let moviesList = [];

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

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

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

希望这会有所帮助。

【讨论】：