[JS]Local Storage VS Session Storage

 

 

 

localStorage와 sessionStorage는 웹 브라우저의 클라이언트 측 스토리지 옵션.

이들은 브라우저에 데이터를 저장하고 나중에 검색할 수 있는 방법을 제공.

 

localStorage

• 특징:
  • 데이터가 사용자의 로컬에 영구적으로 저장됩니다. 즉, 브라우저를 닫고 다시 열어도 데이터는 지속됩니다.
  • 도메인당 5MB 정도의 데이터를 저장할 수 있습니다.
  • JavaScript 객체 형태로 데이터를 저장하며, 문자열로 변환되어 저장됩니다.

 

• 사용 사례:
  • 사용자 설정이나 기본 설정을 저장할 때 유용합니다.
  • 로그인 정보를 저장하여 자동 로그인 기능을 구현할 때 사용할 수 있습니다.
  • 사용자가 종료해도 지속적으로 필요한 데이터를 유지해야 할 때 사용할 수 있습니다.

 

예시 코드:

 // 데이터 저장 
 localStorage.setItem('username', 'john_doe'); 
 
 // 데이터 불러오기 
 const username = localStorage.getItem('username');

sessionStorage

• 특징:
  • 데이터가 현재 세션 동안만 유지됩니다. 즉, 브라우저 탭이나 창을 닫으면 데이터가 소멸됩니다.
  • 도메인당 5MB 정도의 데이터를 저장할 수 있습니다.
  • localStorage와 마찬가지로 JavaScript 객체 형태로 데이터를 저장하며, 문자열로 변환되어 저장됩니다.

 

• 사용 사례:
  • 세션 동안 필요한 데이터를 일시적으로 저장할 때 사용합니다.
  • 페이지 이동 중에 데이터를 전달하는 용도로 활용할 수 있습니다.
  • 특정 작업을 완료한 후 데이터를 일시적으로 저장하고, 다음 페이지에서 사용할 때 활용할 수 있습니다.

예시 코드:

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

// 데이터 불러오기 
const token = sessionStorage.getItem('token');

 

주의 사항

• 보안: 클라이언트 측 스토리지는 보안적으로 취약할 수 있으므로 민감한 정보(예: 비밀번호)를 저장하는 데에는 적합하지 않습니다.
• 용량 제한: 각 스토리지는 브라우저 및 도메인당 용량 제한이 있으므로 이를 초과하면 문제가 발생할 수 있습니다.
• 브라우저 호환성: 대부분의 최신 브라우저에서 localStorage와 sessionStorage를 지원하지만, 일부 오래된 브라우저에서는 지원하지 않을 수 있습니다.

이러한 특성과 차이를 이해하고 적절히 활용하여 클라이언트 측 데이터 저장 및 관리를 수행하는 것이 중요.