Web Storage API

새로고침을 누를 때마다 초기화되는 검색 화면은 사용자가 불편하게 느껴질 수 있다. 그렇다면 검색 정보가 어딘가에 저장되어야하는데, 일시적인 데이터를 DB에 저장하는 것은 효율적이지 못하다. 그래서 생각한 방법이 Web Storage API이다.

 

Web Storage에는 Session Storage와 Local Storage 두 가지 종류가 있다. 노마드 코더의 클론 코딩에서 Local Storage를 활용하여 To-do lists를 구현한 경험이 있는데, Local Storage는 브라우저 창을 닫아도 데이터가 계속 저장되는 특성을 가지고 있기 때문에 Local Storage를 선택한 것 같다. 반면에 Session Storage는 브라우저 창이 열려있는 동안만 데이터를 저장하기 있기 때문에, 검색 결과 저장 시스템에 더 적합하다 생각해서 이번 프로젝트에서는 Session Storage를 선택하였다.

 

저장 및 콜하는 함수를 따로 만들어 사용하였다.

// sessionStorage에서 불러오기
function callData(key) {
  const savedData = sessionStorage.getItem(key);
  return JSON.parse(savedData);
}

//sessionStorage에 저장
function saveData(key, value) {
  const toJson = JSON.stringify(value);
  sessionStorage.setItem(key, toJson);
}

export { callData, saveData };

 

saveData("searchList", resultObj);를 이용해 검색할 때마다 검색 결과가 Session Storage에 저장되도록 만들었고, 조건문과 callData("searchList"); 를 함께 사용하여 웹 페이지가 기본적으로 Session Storage에 저장된 데이터를 기반으로 만들어지도록 구현했다.