LocalStorage와 SessionStorage의 차이점 완벽 정리

 

 

웹 개발을 하다 보면 브라우저의 저장소(Storage) 중 하나인 LocalStorage와 SessionStorage를 마주하게 됩니다. 이 두 가지는 웹 애플리케이션의 데이터를 저장하는 데 사용되지만, 활용 목적과 동작 방식에서 차이가 있습니다. 이번 포스팅에서는 LocalStorage와 SessionStorage의 차이점을 정리하고, 각각의 사용 사례와 함께 이해를 돕는 예시를 제공하겠습니다.

---

1.  LocalStorage와 SessionStorage란?

LocalStorage와 SessionStorage는 HTML5에서 추가된 브라우저 저장소 API로, 클라이언트 측에서 데이터를 저장하는 데 사용됩니다. 두 저장소는 키-값(key-value) 형태로 데이터를 저장하며, 서버에 요청을 보내지 않고도 데이터를 클라이언트에서 읽고 쓸 수 있도록 지원합니다.

구분	LocalStorage	SessionStorage
수명	브라우저를 닫아도 데이터가 유지됨	브라우저 탭을 닫으면 데이터가 삭제됨
용량	약 5MB	약 5MB
스코프	같은 도메인 내 모든 탭에서 공유 가능	현재 탭에서만 유효
사용 사례	사용자 설정, 장기 저장 데이터	일회성 데이터, 탭 한정 데이터

 

---

2.  LocalStorage와 SessionStorage의 차이점

1) 데이터의 수명

• LocalStorage: 데이터를 명시적으로 삭제하지 않는 한, 브라우저를 닫거나 PC를 재시작해도 데이터가 유지됩니다.
• SessionStorage: 데이터를 저장한 브라우저 탭을 닫는 순간 데이터가 삭제됩니다.

2) 데이터 접근 범위

• LocalStorage: 동일한 도메인 내의 모든 탭과 창에서 동일한 데이터에 접근 가능합니다.
• SessionStorage: 데이터를 저장한 브라우저 탭에서만 접근할 수 있으며, 다른 탭이나 창에서는 접근이 불가능합니다.

3) 데이터 용량

• 두 저장소 모두 약 5MB의 용량을 지원합니다. 이는 대부분의 브라우저에서 동일합니다.

---

3.  LocalStorage와 SessionStorage 사용법

LocalStorage 예제

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

// 데이터 읽기
const username = localStorage.getItem('username');
console.log(username); // JohnDoe

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

// 모든 데이터 삭제
localStorage.clear();

SessionStorage 예제

// 데이터 저장
sessionStorage.setItem('sessionId', '123456');

// 데이터 읽기
const sessionId = sessionStorage.getItem('sessionId');
console.log(sessionId); // 123456

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

// 모든 데이터 삭제
sessionStorage.clear();

---

4.  LocalStorage와 SessionStorage의 활용 사례

LocalStorage 사용 사례

• 사용자 설정 저장: 다크 모드, 폰트 크기와 같은 사용자 환경 설정을 저장합니다.
• 장바구니 데이터 저장: 전자상거래 사이트에서 사용자가 장바구니에 추가한 아이템을 저장합니다.

SessionStorage 사용 사례

• 폼 데이터 저장: 페이지를 새로고침했을 때 입력한 데이터를 유지합니다.
• 일회성 사용자 인증: 탭을 닫으면 만료되는 임시 토큰을 저장합니다.

---

5.  LocalStorage와 SessionStorage를 사용할 때의 주의점

1. 보안 문제:
   • 저장소에 민감한 데이터를 저장하지 말아야 합니다.
   • XSS(Cross-Site Scripting) 공격으로 인해 데이터가 탈취될 수 있으므로, 중요한 데이터는 서버에 저장해야 합니다.
2. 브라우저 지원:
   • 대부분의 최신 브라우저에서 지원되지만, 특정 구형 브라우저에서는 지원하지 않을 수 있습니다. 따라서 필요시 Polyfill을 사용할 수 있습니다.
3. 동기 작업:
   • LocalStorage와 SessionStorage는 동기적으로 작동하므로, 큰 데이터 저장/읽기 작업은 성능에 영향을 줄 수 있습니다.

---

6.  LocalStorage와 SessionStorage의 선택 기준

사용 상황	추천 저장소
데이터를 브라우저 탭을 닫아도 유지해야 하는 경우	LocalStorage
데이터를 현재 세션(탭)에서만 유지해야 하는 경우	SessionStorage

---

7.  정리

LocalStorage와 SessionStorage는 웹 애플리케이션에서 데이터를 저장하는 강력한 도구입니다. 각 저장소의 차이점과 특성을 이해하고 적절한 사용 사례를 적용한다면, 더 나은 사용자 경험을 제공할 수 있습니다. 브라우저 저장소를 사용할 때는 보안과 성능을 항상 고려해야 한다는 점도 잊지 마세요!