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

Question

I am trying to implement a simple 'add to favorites' feature but can't quite get things working in local storage.

I am able to push an object/array to local storage and retrieve it back but when I click on the next item to 'add to favorites' I end up overwriting the previous one rather than adding a new object to the array.

code below:

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

How can I update the array if the same object is not already there?

Answer 1

Probably you can use Set() instead which helps you store unique movies in localStorage .

Try as the following:

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

I hope this helps!

Answer 2

Check if object is alreadyin retreived movies using array.some and only if not present push it.

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

Your function isn't reading the old setting. Instead you're starting with a new, empty array:

let moviesList = [];

Here you could instead load the data saved last time, like this:

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

Then modify it by adding the new movie, then save, as you are already doing.

Hope this helps.