如果尚未在 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");

然后通過添加新電影來修改它，然后保存，就像你已經在做的那樣。

希望這可以幫助。