#기본기15_localStorage와 sessionStorage의 차이

GPT 소환

 

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

 

이 두 가지는 목적과 수명에 따라 차이가 있습니다

1. 데이터 수명:
   • localStorage: 데이터는 브라우저를 닫아도 영구적으로 보존됩니다. 사용자가 명시적으로 지우거나 데이터를 저장한 웹 사이트가 데이터를 삭제할 때까지 데이터가 유지됩니다.
   • sessionStorage: 데이터는 세션(session)이 유지되는 동안에만 유지됩니다. 브라우저 창이나 탭이 열려 있는 동안에는 데이터가 유지되지만, 브라우저 창이나 탭을 닫으면 데이터가 삭제됩니다.
2. 공유 여부:
   • localStorage: 동일한 도메인 내의 모든 창과 탭에서 공유됩니다. 즉, 동일한 도메인에서 실행되는 다른 웹 페이지에서도 동일한 localStorage 데이터에 액세스할 수 있습니다.
   • sessionStorage: 세션(session)에 바인딩되어 있으므로 동일한 브라우저 창이나 탭 내에서만 공유됩니다. 다른 브라우저 창이나 탭에서는 다른 sessionStorage가 생성되므로 데이터가 공유되지 않습니다.
3. 저장 용량:
   • 일반적으로 localStorage의 저장 용량이 sessionStorage보다 큽니다. localStorage는 대략 5MB ~ 10MB의 용량을 가질 수 있습니다.
   • sessionStorage는 브라우저 탭 또는 창마다 별도의 저장소를 가지므로 일반적으로 작은 용량(약 5MB)을 가집니다.
4. 사용 사례:
   • localStorage는 사용자의 로그인 정보, 사용자 설정 및 기타 지속적인 데이터를 저장하는 데 적합합니다.
   • sessionStorage는 새로고침 시 데이터를 유지해야 하지만, 브라우저를 닫으면 데이터를 삭제해야 하는 경우에 유용합니다. 예를 들어, 장바구니, 임시 저장 데이터 등을 저장하는 데 사용될 수 있습니다.

이러한 차이점을 고려하여 웹 애플리케이션에서 적절한 스토리지 옵션을 선택할 수 있습니다.

 

localStorage사용법

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

// 데이터 가져오기
const username = localStorage.getItem('username');
console.log(username); // 출력: "John"

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

 

sessionStorage사용법

// 데이터 저장
sessionStorage.setItem('token', 'abc123');

// 데이터 가져오기
const token = sessionStorage.getItem('token');
console.log(token); // 출력: "abc123"

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