[JavaScript] 웹 스토리지를 이용한 상태 유지

서동경·2023년 2월 22일

🍀 웹 스토리지(Web Storage)란?

웹 개발 시, 데이터를 데이터베이스 서버나 클라우드 플랫폼에 저장하는 것이 낭비일때, 클라이언트 측에 저장할 수 있도록 한 API를 웹 스토리지라고 한다.

문자열 데이터 타입만 지원한다. 그러므로 문자열 외의 데이터 타입을 입력하고자 할 때는 JSON 형태로 데이터를 쓰고 읽어들여야 한다. 즉, 웹 스토리지에 쓸 데이터를 JSON.stringify를 이용해 직렬화해서 써주고, JSON.parse를 이용해 역직렬화해서 읽어온다면 원본 데이터를 그대로 얻을 수 있다.

🌱 웹 스토리지의 종류

🧩 로컬 스토리지(`localStorage`)

여러 탭이나 창 간의 데이터가 서로 공유되며 창을 닫아도 데이터가 그대로 유지된다. 즉 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않는다.

🧩 세션 스토리지(`sessionStroage`)

여러 탭이나 창 간의 데이터가 여러 개의 세션 스토리지에 서로 격리되어 저장되며 웹페이지의 세션이 끝날 때, 즉 창이나 탭이 닫힐 때 저장된 데이터가 지워진다.

🍀 웹 스토리지를 이용한 상태 유지

새로고침, 페이지 이동, 브라우저를 닫고 다시 켜는 등 웹 페이지가 재시작 동작을 할 때에도 특정 요소의 이전 상태를 유지하는 기능을 웹 스토리지를 통해 구현할 수 있다.

다음은, 아이콘을 클릭하면 <nav> 요소가 열리고 닫히는 기능을 구현한 코드에서, localStorage를 통해 이전 상태를 유지하는 기능을 담은 자바스크립트 코드이다.

// i 태그를 toggle 변수에 할당
let toggle = document.querySelector("i");
// toggle 변수에 click 이벤트에 대한 이벤트 리스너 등록
toggle.addEventListener("click", function () {
  // nav 태그의 활성화 여부를 classList와 localStorage에 추가,삭제하는 이벤트 핸들러 등록
  document.querySelector("nav").classList.toggle("active");
  if (document.querySelector("nav").classList.contains("active") === true) {
    localStorage.setItem("active", "true");
  } else {
    localStorage.setItem("active", "false");
  }
});

// nav 태그의 활성화 여부를 저장한 localStorage에 따른 상태 정의
// "visibility: hidden"에 대응하기 위한 "visibility: visible" 추가 
// ("visibility: hidden": 페이지 로드 시 요소들의 움직임을 없애기 위한 CSS 코드) 
if (localStorage.getItem("active") === "true") {
  document.querySelector("nav").classList.add("active");
  document.body.style.visibility = "visible";
} else {
  document.body.style.visibility = "visible";
}

// window 객체에 load 이벤트에 대한 이벤트 리스너 등록
// 페이지 로드를 마치면 "preload" 클래스를 제거
// ("preload": 로드 시 트렌지션 효과가 일어나지 않도록 하기 위한 <body>의 클래스)
// 즉 첫 페이지 로드 이후부터 트렌지션이 적용됨
window.addEventListener("load", function () {
  document.body.classList.remove("preload");
});