Javascript [7]

mainpage와 detailpage가 어느정도 바탕이 짜여져야 내가 진행을 같이 하기로 했기 때문에 내 개인과제에 있는것을 바탕으로 진행.

1. 영화 리스트중에 하나를 클릭하면 상세페이지로 넘어가게

2. 상세페이지 이동후에 해당 영화가 console창에 뜨는지 확인

3. 로컬스토리지안에 데이터 삽입하기

// 클릭 이벤트 핸들러 추가
 	divList.onclick = () => {
      const movieId = list.id;
      localStorage.setItem("selectMovie", JSON.stringify(list));
      // 상세 페이지로 이동
      window.location.href = `/detail.html?id=${movieId}`;
    };

위 코드처럼 detail.html을 만든후에 location을 사용해서 영화의 id값으로 상세페이지로 넘겼음.

• 상세페이지로 넘어갔을 때 데이터를 불러오기가 힘듦

-->해결방안 클릭한 해당영화를 localstorage안에 넣어서 불러오도록 설정

const selectedMovie = JSON.parse(localStorage.getItem("selectMovie"));
if (selectedMovie) {
  displayMovieDetail(selectedMovie.id);
} else {
  console.error("선택한 영화가 없습니다.");
}

setItem으로 localstorage안에 selectMovie라는 말로 담고, getItem으로 localstorage밖으로 꺼낸다.