[Frontend] localStroage vs SessionStorage

오늘은 웹 브라우저에서 클라이언트 측 데이터를 저장하는데 사용되는 메커니즘인 localStorage, SessionStorage에 대해 알아보겠습니다.

 

https://www.xenonstack.com/insights/local-vs-session-storage-vs-cookie

 

 

HTML5를 사용하기 시작한 이래로 클라이언트 브라우저에 정보를 캐시하거나 저장하는 다양한 옵션이 제공되었습니다. 이전에는 브라우저에 데이터를 저장할 때 쿠키만 사용했지만, 제한적인 용량과 보안적인 문제로 인한 한계가 존재했습니다.

 

이에 대한 개선안으로 localStorage, SessionStorage가 도입되었는데, 이 두 개의 특징과 차이점에 대해 간단하게 설명드리겠습니다.

 

localStorage

• 저장방식: 웹 브라우저에서 키/값 쌍형태로 저장합니다. (로컬 컴퓨터에 저장)
• 유지기간: 영구적으로 데이터 저장(도메인별로 지속), 브라우저를 닫아도 데이터 유지되며 OS가 재시작돼도 데이터가 파기되지 않습니다 → 값을 지우려면 직접 지워야 합니다.
• 액세스: 동일한 도메인 내 모든 페이지에서 액세스가 가능하고, 해당 데이터는 서버로 전송되지 않습니다.
• 저장형식: 브라우저의 로컬 파일 시스템에 데이터를 저장합니다.
• 저장용량: 도메인당 10MB입니다.
• 관련 메서드: setItem(key, value), getItem(key), removeItem(), clear()

 

sessionStorage

• 유지기간: 세션 기간 동안 데이터 저장 (현재 떠있는 탭 내에서만 유지, localStorage에 비해 제한) → 새로고침 시에는 저장된 데이터가 사라지지 않고, 탭을 닫고 새로 열 때는 사라집니다.
• 액세스: 세션간 데이터 공유 불가, 동일한 세션 내에서만 액세스가 가능합니다
• 저장 형식: JavaScript 객체 형식으로 데이터를 저장합니다
• 저장 용량: 브라우저마다 상이, 일반적으로는 5MB입니다.
• 관련 메서드: setItem(key, value), getItem(key)

 

<참고 자료>

https://gaagaagaa.tistory.com/entry/Javascript-localStorage와-sessionStorage

[Javascript] localStorage와 sessionStorage

https://ko.javascript.info/localstorage

localStorage와 sessionStorage

https://inpa.tistory.com/entry/JS-📚-localStorage-sessionStorage

[JS] 📚 LocalStorage / SessionStorage (vs 쿠키와 비교)