[Node.js] localStorage와 sessionStorage의 차이점 정리

 

ㅁ 들어가며

  localStorage와 sessionStorage는 모두 브라우저에 데이터를 저장하는 용도로 쓰지만, 데이터의 생명주기와 공유 범위에서 차이가 크다. 둘 다 HTML5에서 제공하는 Web Storage API로, key-value 형태로 데이터를 저장한다. 오랫동안 유지해야 하거나 여러 탭에서 공유해야 하는 데이터는 localStorage에, 세션(탭/창) 동안만 필요한 데이터는 sessionStorage에 저장한다. 용도에 맞게 적절히 선택해 사용한다.

 

ㅁ 주요 차이점 요약

구분	localStorage	sessionStorage
데이터 유지 기간	브라우저를 닫아도 유지	탭/창을 닫으면 삭제
공유 범위	같은 도메인 내 모든 탭/창에서 공유	탭/창별로 독립, 다른 탭/창과 공유되지 않음
삭제 방식	직접 삭제 필요	탭/창 종료 시 자동 삭제
사용 예시	사용자 설정, 장기 저장 데이터	임시 데이터, 세션 동안만 필요한 정보
용량	약 5~10MB	약 5~10MB

 

 

ㅁ 생명주기 (Lifecycle)

sessionStorage

• 브라우저 탭/윈도우가 열려있는 동안만 데이터가 유지됩니다.
• 탭을 닫으면 데이터가 즉시 삭제됩니다.
• 브라우저를 완전히 종료하면 모든 sessionStorage 데이터가 사라집니다.

localStorage

• 브라우저를 완전히 종료해도 데이터가 유지됩니다.
• 사용자가 명시적으로 삭제하거나, 브라우저 설정에서 삭제하기 전까지는 계속 보존됩니다.

 

ㅁ 공유 범위 (Scope)

sessionStorage

• 같은 탭/윈도우 내에서만 데이터가 공유됩니다.
• 새 탭을 열면 완전히 새로운 sessionStorage 공간이 생성됩니다.
• 예시:
• // 탭 A에서 sessionStorage.setItem('user', 'john'); // 새 탭 B에서 console.log(sessionStorage.getItem('user')); // null (데이터 없음)

localStorage

• 모든 탭/윈도우에서 데이터가 공유됩니다.
• 새 탭을 열어도 기존 데이터에 접근할 수 있습니다.
• 예시:
• // 탭 A에서 localStorage.setItem('user', 'john'); // 새 탭 B에서 console.log(localStorage.getItem('user')); // 'john' (데이터 공유됨)

 

 

ㅁ 실제 동작 예시

// sessionStorage 테스트
sessionStorage.setItem('sessionData', 'session value');
localStorage.setItem('localData', 'local value');

// 같은 탭에서
console.log(sessionStorage.getItem('sessionData')); // 'session value'
console.log(localStorage.getItem('localData'));     // 'local value'

// 새 탭에서
console.log(sessionStorage.getItem('sessionData')); // null (없음)
console.log(localStorage.getItem('localData'));     // 'local value' (공유됨)

 

ㅁ 사용 시나리오

sessionStorage 사용하는 경우

• 임시 데이터: 폼 입력 중간 저장, 임시 계산 결과
• 탭별 독립적인 데이터: 각 탭마다 다른 작업을 할 때
• 보안이 중요한 데이터: 탭별로 격리되어야 하는 정보

localStorage 사용하는 경우

• 사용자 설정: 테마, 언어 설정, UI 상태
• 인증 정보: 로그인 토큰, 사용자 정보
• 캐시 데이터: API 응답 캐시, 오프라인 데이터

 

ㅁ 함께 보면 좋은 사이트

ㅇ Local Storage & Session Storage란?