JavaScript sessionStorage, localStorage

sessionStorage와 localStorage는 웹 브라우저에서 제공되는 클라이언트 측 웹 스토리지 메커니즘이다. 이 두가지는 JavaScript를 사용하여 웹 애플리케이션의 데이터를 클라이언트 측에 저장하는데 사용한다.

- Session Storage

• 세션스토리지는 브라우저 세션(탭) 동안 데이터를 저장하며, 세션 종료시 데이터가 지워진다.
• 각 브라우저 탭이나 창마다 별도의 세션 스토리지가 생성된다.
• 세션 스토리지에 저장된 데이터는 같은 세션 내에서만 접근이 가능하다.
• 'sessionStorage'를 사용하여 데이터를 읽고 쓸 수 있으며, 주로 세션동안 유지해야 하는 데이터에 사용된다.

// 세션 스토리지에 데이터 저장하기
sessionStorage.setItem('username', 'John');

// 세션 스토리지에서 데이터 읽어오기
const username = sessionStorage.getItem('username');
console.log('Username:', username); // 출력: Username: John

// 세션 스토리지에서 데이터 제거하기
sessionStorage.removeItem('username');

- Local Storage

• 로컬 스토리지는 브라우저를 종료해도 데이터가 유지된다.
• 동일한 도메인에 속한 모든 페이지에 대해 동일한 로컬 스토리지가 공유되며, 로컬 스토리지에 저장된 데이터는 브라우저의 로컬 파일 시스템에 저장된다.
• 'localStorage' 객체를 사용하여 데이터를 읽고 쓸 수 있으며 주로 사용자의 개인 설정, 사용자 인증정보 등을 저장하는 데 사용된다.

// 로컬 스토리지에 데이터 저장하기
localStorage.setItem('theme', 'dark');

// 로컬 스토리지에서 데이터 읽어오기
const theme = localStorage.getItem('theme');
console.log('Theme:', theme); // 출력: Theme: dark

// 로컬 스토리지에서 데이터 제거하기
localStorage.removeItem('theme');

둘의 차이는 영구성이다.

로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있지만 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다.