로컬스토리지와 세션스토리지 - 브라우저 저장소

Local Storage and Session Storage - Browser Storage

• 사용법

  // 데이터 저장
  localStorage.setItem('username', 'Alice');
   
  // 데이터 조회
  const username = localStorage.getItem('username'); // 'Alice'
   
  // 데이터 삭제
  localStorage.removeItem('username');
   
  // 모든 데이터 삭제
  localStorage.clear();

• 주요 용도
  자동 로그인 시 사용자 아이디 기억, 다크/라이트 모드 같은 사용자 테마 설정 등, 사용자가 브라우저를 껐다 켜도 유지되어야 하는 설정 값들을 저장하기에 적합합니다.

• 사용법
  :
  API(메서드)는 로컬스토리지와 완전히 동일합니다.

// 데이터 저장
sessionStorage.setItem('tempData', '이것은 임시 데이터입니다.');
 
// 데이터 조회
const tempData = sessionStorage.getItem('tempData');

• 주요 용도
  입력 폼에 작성 중인 데이터 임시 저장(새로고침 시 데이터 유실 방지), 현재 페이지의 스크롤 위치 기억, 일회성으로 보여주는 팝업이나 안내 메시지의 '오늘 하루 보지 않기' 상태 관리 등, 해당 탭에서만 잠시 필요한 정보를 저장하기에 적합합니다.

로컬스토리지 & 세션스토리지

로컬스토리지와 세션스토리지는 모두 웹 스토리지 API의 일부로, 사용법은 동일하지만

데이터의 영속성(생명 주기)

과

스코프(유효 범위)

에서 큰 차이가 있습니다.

로컬스토리지

는 데이터를 명시적으로 삭제하지 않는 한

영구적으로

보존되며, 동일한 출처의 모든 탭과 창에서 데이터를

공유

합니다.

반면,

세션스토리지

는 데이터가

현재 탭의 세션 동안에만

유지되고, 탭을 닫으면 데이터가 즉시 사라집니다.

또한, 데이터는 현재 탭에만 국한되며 다른 탭과

공유되지 않습니다.

가장 큰 차이점은

서버와의 통신 방식

과

용량

입니다.

쿠키

는 매 HTTP 요청마다 헤더에 자동으로 포함되어 서버로 전송되므로, 인증과 같이 서버가 알아야 하는 상태를 유지하는 데 사용됩니다.

하지만 이 때문에 네트워크 트래픽에 부담을 주고, 용량도 약 4KB로 매우 작습니다.

반면,

웹 스토리지

는 서버로 자동 전송되지 않고 오직 클라이언트 측에서만 사용됩니다.

자바스크립트를 통해 수동으로 데이터를 가져와 서버에 보내야만 합니다.

용량도 약 5-10MB로 쿠키보다 훨씬 크기 때문에, 순수하게 클라이언트 측의 데이터를 저장하는 데 더 적합합니다.

• 로컬스토리지
  :
  영구적인
  데이터를 위한
  공유 보관함
  입니다.
• 세션스토리지
  :
  임시적인
  데이터를 위한
  개별 탭의 보관함
  입니다.
• 두 기술 모두
  쿠키
  와는 달리 서버로 자동 전송되지 않아, 순수한 클라이언트 측 저장소로 활용됩니다.

• MDN - 웹 스토리지 API↗
• MDN - Window.localStorage↗
• MDN - Window.sessionStorage↗