[JavaScript] 개인 과제 수행 - 4일차 (localStorage 삭제)

북마크 삭제 버튼을 눌렀을 때 로컬스토리지에 저장된 데이터가 삭제되는 기능!!!

 

먼저 북마크삭제 버튼에 이벤트리스너에서 뭔가를 조작해야된다

 // 북마크 삭제 버튼을 눌렀을 때
  removeBookmark.addEventListener("click", () => {
    // removeBookmark.style.display = "none"; // 삭제 버튼 숨기기
    // addBookmark.style.display = "flex"; // 추가 버튼 보이기
    alert("영화가 북마크에서 제거되었습니다.");

    modalContainer.style.display = "none"; // 삭제 후 모달창 숨기기
  });

 

이게 원래 북마크 삭제 버튼 눌렀을 때 코드인데 여기서 데이터가 삭제되는 매직을 구현해야된다..

 

 // 북마크 삭제 버튼을 눌렀을 때
  removeBookmark.addEventListener("click", () => {
    // removeBookmark.style.display = "none"; // 삭제 버튼 숨기기
    // addBookmark.style.display = "flex"; // 추가 버튼 보이기
    alert("영화가 북마크에서 제거되었습니다.");

    // 로컬 스토리지에서 해당 영화 삭제
    let bookmarksData = JSON.parse(localStorage.getItem("bookmarks")) || [];
    // => 북마크 추가 버튼 눌렀을 때의 영화 데이터를 요기에도 똑같이 가져온다.

    const deletedBookmarks = bookmarksData.filter(
      (bookmark) => bookmark.id !== modalMovieData.id
    );
    // => deletedBookmarks는 현재 배열에 있는 bookmark 배열의 id와 모달에 있는 영화 id가 
    // 다를 경우에만 bookmarksData에 남겨줘! 라는 이름의 변수
    // (선택한 영화를 제외한 나머지 영화들로만 이루어진 새로운 배열로 만들어줌)
    
    localStorage.setItem("bookmarks", JSON.stringify(deletedBookmarks));
    // => 필터링 하고 남은 배열을 로컬스토리지에 다시 세팅해줘!
    
    modalContainer.style.display = "none"; // 삭제 후 모달창 숨기기
    
    displayMovies(deletedBookmarks)
    // => 모달창이 꺼지면 북마크에 남아있는 영화들만 보이게 하기
  });

 

근데 이제 여기서 문제가 하나 있다.

북마크 삭제까진 잘 되는데 북마크만 모여있는 페이지에서 모달창을 누르면 북마크 삭제 버튼이 아니라 북마크 추가 버튼이 계속 활성화 되어있는것,,

그럼 이제 북마크보기 이벤트리스너로 가보자

 

// 북마크보기 버튼 이벤트리스너
const bookmarkBtn = document.querySelector("#bookmarkBtn");

bookmarkBtn.addEventListener("click", () => {
  // 로컬 스토리지에서 북마크된 영화 불러오기
  const showBookmarks = JSON.parse(localStorage.getItem("bookmarks")) || [];

  const movieContainer = document.getElementById("movies-container");
  movieContainer.innerHTML = ""; // 기존 영화 카드 초기화

  if (showBookmarks.length > 0) {
    showBookmarks.forEach((movie) => {
      // 카드 생성
      const bookmarkCard = document.createElement("div");
      bookmarkCard.classList.add("movie-card");

      bookmarkCard.innerHTML = `
      <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}" />
      <h3>${movie.title}</h3>
      <p>개봉일 : ${movie.release_date}</p>
      <p>평점 : ${movie.vote_average}/10</p>
    `;

      // 클릭 이벤트 추가
      bookmarkCard.addEventListener("click", () => {
        createModal(movie); // 클릭된 영화 정보를 모달에 표시
      });

      // 북마크된 영화 카드를 컨테이너에 추가
      movieContainer.appendChild(bookmarkCard);
    });
  } else {
    movieContainer.innerHTML = `<p class="noBookmark">북마크된 영화가 없습니다</p>`;
  }
});

 

이게 원래 코드

 

// 북마크보기 버튼 이벤트리스너
const bookmarkBtn = document.querySelector("#bookmarkBtn");

bookmarkBtn.addEventListener("click", () => {
  // 로컬 스토리지에서 북마크된 영화 불러오기
  const showBookmarks = JSON.parse(localStorage.getItem("bookmarks")) || [];

  const movieContainer = document.getElementById("movies-container");
  movieContainer.innerHTML = ""; // 기존 영화 카드 초기화

  if (showBookmarks.length > 0) {
    showBookmarks.forEach((movie) => {
      // 카드 생성
      const bookmarkCard = document.createElement("div");
      bookmarkCard.classList.add("movie-card");

      bookmarkCard.innerHTML = `
      <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}" />
      <h3>${movie.title}</h3>
      <p>개봉일 : ${movie.release_date}</p>
      <p>평점 : ${movie.vote_average}/10</p>
    `;

      // 클릭 이벤트 추가
      bookmarkCard.addEventListener("click", () => {
        createModal(movie); // 클릭된 영화 정보를 모달에 표시
        
        addBookmark.style.display = "none"; // 추가 버튼 숨기기
        removeBookmark.style.display = "flex"; // 삭제 버튼 보이기
        // => 북마크보기 페이지에서는 삭제버튼만 보이게 하기!!!!
    
      });

      // 북마크된 영화 카드를 컨테이너에 추가
      movieContainer.appendChild(bookmarkCard);
    });
  } else {
    movieContainer.innerHTML = `<p class="noBookmark">북마크된 영화가 없습니다</p>`;
  }
});

 

거의 숨은그림찾기 같긴 한데 클릭이벤트 추가 부분에 보면 

        addBookmark.style.display = "none"; // 추가 버튼 숨기기

        removeBookmark.style.display = "flex"; // 삭제 버튼 보이기

 

이 두 줄로 해결 가능!!!!!! 

 

물론 더 효율적인 다른 방법도 있겠지만 지금의 나로썬 최선이였따...☆

 

어찌어찌 다 된거같긴 한데... 맞겠지??? ㅋㅋㅋㅋ