LocalStorage활용하여 검색 결과 보존하기

 영화를 검색한 뒤, 상세정보를 보고 뒤로가기를 누르면, 기존의 검색 결과가 사라지는 문제를 확인했다. 이를 해결하기 위해 LocalStorage를 활용하여 해결했다.

 

//돌아가기 버튼 기능
            const backBtn = document.getElementById("back-button");
            backBtn.addEventListener('click', () => {
                localStorage.setItem('fromIndex', 'true'); // 상세 페이지로 왔다는 것을 표시
                // 타이틀 페이지로 이동
                window.location.href = 'index.html';
            });

먼저 fromIndex라는 아이템을 생성해서, 상세페이지에서 메인페이지로 돌아가는 것을 확인하였다.

 

//이전 검색 결과가 있으면 불러온다
function loadingSearchValue(data) {
  const searchTerm_storage = JSON.parse(localStorage.getItem('searchValue')); //JSON파일을 다시 문자열로 바꾼다.

  if (searchTerm_storage === null || localStorage.getItem('fromIndex') === null) { //만약 저장된 검색 결과가 없으면 영화 카드를 모두 생성한다.
    renderMovies(data);
    return;
  }
  localStorage.removeItem('fromIndex'); // 필요없어졌으므로 삭제
  const filteredMovies = data.filter(movie => movie.title.toLowerCase().includes(searchTerm_storage)); //저장된 검색 결과가 있으면 검색한 결과만 생성한다.
  renderMovies(filteredMovies);
}

 

그 다음 이전 검색 결과가 있는지, 상세페이지에서 돌아오는 건지 확인해서 검색 결과가 있다면 해당 카드만 생성하였다.

 

//html창이 종료될 때 
  window.addEventListener('unload', function () {
    localStorage.removeItem('fromIndex'); // 상세 페이지로 왔다는 것을 표시
  });
  
  //////////////////////////
  
  
  //html창이 종료될 때 
        window.addEventListener('unload', function () {
            localStorage.removeItem('movie'); //상세정보를 가져오기위해 생성한 movie를 삭제함
        });

 

마지막으로 사용하고 남은 localStorage의 데이터는 페이지가 종료될 때 삭제하였다.