[FE 기술 면접] localStorage와 sessionStorage 차이점

Ahnzi·2025년 2월 4일

프론트엔드 기술 면접 공간

목록 보기

3/11

localStorage vs sessionStorage

localStorage 와 sessionStorage 는 웹 브라우저에서 제공하는 클라이언트 측 저장소 API로 데이터를 저장하는 두 가지 방법입니다.
두 방식 모두 브라우저의 저장 공간을 활용하여 Key-Value 형태로 데이터를 저장하지만 사용 목적과 유지 기간에서 차이가 있습니다.

localStorage

설명

localStorage 는 데이터를 영구적으로 저장합니다. 브라우저를 닫거나 장치를 재부팅해도 데이터가 유지되며, 동일한 도메인 내의 모든 탭에서 데이터를 공유할 수 있습니다.
사용 예로는 다크모드 같은 테마 설정이나 장바구니 데이터와 같이 장기적으로 유지해야 하는 데이터 저장에 적합합니다. 또한 자동 로그인 기능(토큰 저장)에도 적합합니다.

특징

데이터 지속성 : 브라우저를 닫거나 새로고침해도 데이터가 유지됩니다.
도메인 단위 저장 : 동일한 도메인(출처)에서는 페이지가 다르더라도 저장된 데이터에 접근이 가능합니다.
데이터 만료 없음 : 사용자가 명시적으로 삭제하지 않는 이상 계속 남아있습니다.

사용 예제

// 데이터 저장
localStorage.setItem("username", "Ahnzi");

// 데이터 가져오기
const user = localStorage.getItem("username");
console.log(user); // Ahnzi

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

// 전체 삭제
localStorage.clear();

sessionStorage

설명

sessionStorage 는 데이터가 현재 브라우저 세션 동안만 유지되며, 브라우저 탭이나 창을 닫으면 데이터가 삭제됩니다. 또한 같은 도메인이라도 탭 간에는 데이터를 공유하지 않습니다.
사용 예로는 로그인 후 인증 데이터를 일시적으로 저장하거나, 특정 탭에서만 사용할 데이터를 관리하는 데에 있습니다.

특징

세션 기반 저장 : 브라우저 탭(세션)이 유지되는 동안만 데이터를 저장합니다.
새 탭을 열거나 브라우저를 닫으면 데이터가 삭제됩니다.
도메인 단위 저장 : 같은 도메인 내에서만 접근이 가능합니다.

사용 예제

// 데이터 저장
sessionStorage.setItem("sessionKey", "Session Data");

// 데이터 가져오기
console.log(sessionStorage.getItem("sessionKey")); // "Session Data"

// 데이터 삭제
sessionStorage.removeItem("sessionKey");

// 전체 삭제
sessionStorage.clear();