localStorage와 sessionStorage는 웹 브라우저에서 데이터를 클라이언트 측에 저장하는 데 사용되는 일종의 웹 전용 저장소이다. 이 두가지 개념은 프론트엔드 웹 개발에 있어서 기본적인 사항이므로 보다 자세히 짚고 넘어가자.

localStorage

localStorage는 웹 브라우저 내에 데이터를 영구적으로 저장하는 데 사용되는 웹 스토리지 저장소이다. 이 데이터는 사용자가 웹 페이지를 닫아도 브라우저 세션 간에도 지속된다.

특징

• 영구적 데이터 저장
  localStorage에 저장된 데이터는 브라우저 세션 간에 지속된다. 사용자가 브라우저를 닫더라도 데이터는 유지된다.

• 도메인 공유
  localStorage는 도메인 별로 데이터가 공유된다. 같은 도메인 내에서 여러 페이지 간에 데이터를 공유할 수 있다.

• 저장 형식
  데이터는 key-value 쌍으로 저장되며, 데이터는 문자열 형태로 저장된다. 객체나 배열과 같은 복잡한 데이터 구조는 문자열로 직렬화되어 저장되어야 한다.

예시

// 데이터 저장
localStorage.setItem('username', 'John');
localStorage.setItem('age', 22);

// 데이터 불러오기
const username = localStorage.getItem('username');
const age = localStorage.getItem('age');

// 데이터 삭제
localStorage.removeItem('username');

// 모든 데이터 삭제
localStorage.clear();

사용 시기

• 사용자 설정 및 환경 설정 저장
  사용자가 웹 애플리케이션의 테마, 언어 설정과 같이 영구적으로 유지되어야 하는 설정을 저장하는 데 적합하다.
  사용자의 기본 설정을 저장하고 웹 페이지를 방문할 때마다 해당 설정을 적용할 수 있다.

• 자동 로그인 유지
  사용자의 로그인 정보를 저장하여 다음 방문 때 자동 로그인 기능을 구현할 때 유용하다. 사용자가 로그인한 상태를 지속시켜서 편의성을 제공할 수 있다.

• 최근 본 항목 저장
  사용자가 최근에 본 상품, 페이지 등을 저장하여 추후에 쉽게 접근할 수 있도록 할 수 있다.

sessionStorage

sessionStorage는 웹 브라우저 내에 데이터를 세션 동안만 유지하는 데 사용되는 웹 스토리지 저장소이다. 세션이 종료되면 데이터도 함께 삭제된다.

특징

• 세션 기반 데이터 저장
  sessionStorage에 저장된 데이터는 브라우저 세션 동안에만 유지된다. 브라우저 창이나 탭을 닫을 경우 데이터도 함께 삭제된다.

• 도메인 공유
  sessionStorage도 도메인 별로 데이터가 공유되며, 같은 도메인 내에서 여러 페이지 간에 데이터를 공유할 수 있다.

• 저장 형식
  localStorage와 마찬가지로 key-value쌍으로 데이터를 저장하며, 데이터는 문자열로 저장된다.

사용 사례

• 임시 데이터 저장
  사용자가 현재 세션 동안만 필요한 데이터를 저장하는 데 사용된다. 로그인한 유저 혹은 임시 장바구니나 폼 데이터와 같이 현재 세션 내에서만 유지해야 하는 데이터를 저장할 수 있다.

• 웹 페이지 간 데이터 공유
  사용자가 여러 탭이나 창을 열어 웹 페이지 간에 데이터를 공유해야 할 때 유용하다. 예를 들어, 사용자가 여러 탭에서 동일한 세션 데이터를 공유하고자 할 때 활용할 수 있다.

• 단기 세션 관리
  웹 애플리케이션에서 간단한 세션 관리를 위해 사용될 수 있다. 예를 들어, 임시 작업 상태를 유지하거나 페이지 이동 간의 데이터 전달에 활용할 수 있다.

예시

// 데이터 저장
sessionStorage.setItem('language', 'english');
sessionStorage.setItem('theme', 'light');

// 데이터 불러오기
const language = sessionStorage.getItem('language');
const theme = sessionStorage.getItem('theme');

// 데이터 삭제
sessionStorage.removeItem('theme');

// 모든 데이터 삭제 (세션 종료 시 자동으로 삭제됨)
sessionStorage.clear();

주의사항

• 보안 문제
  웹 스토리지는 클라이언트 측에서 동작하므로 보안에 민감한 정보를 저장하기에는 적합하지 않다. 또한 브라우저의 개발자 도구를 사용하면 저장된 데이터를 확인, 수정, 삭제할 수 있으므로 보안과 관련된 주의가 필요하다.

• 호환성
  데이터 크기 제한이 있을 수 있으며, 또한 브라우저마다 지원 여부와 동작 방식이 다를 수 있으므로 사용 시 주의가 필요하다.

• 저장 형태
  데이터를 저장할 때는 JSON.stringify()와 JSON.parse()와 같은 메서드를 사용하여 객체나 배열과 같은 복잡한 데이터를 문자열로 변환하고 역변환해야 할 수 있다.