[JavaScript] LocalStorage와 SessionStorage의 차이점과 사용법

웹 브라우저는 데이터를 클라이언트 측에 저장할 수 있도록 다양한 저장소를 제공합니다. 그 중에서도 localStorage와 sessionStorage는 가장 널리 사용되는 Web Storage API입니다. 두 저장소 모두 키-값 쌍으로 데이터를 저장할 수 있지만, 유지 시간과 용도에 차이가 있습니다. 이번 포스팅에서는 localStorage와 sessionStorage의 차이점과 사용 방법을 예제와 함께 자세히 설명하겠습니다.

LocalStorage와 SessionStorage의 차이점과 사용법

---

1. Web Storage란?

1) Web Storage 개념

• HTML5에서 도입된 클라이언트 측 저장 방식입니다.
• 서버와의 통신 없이 브라우저에 데이터를 저장할 수 있습니다.
• 대표적으로 localStorage와 sessionStorage가 있습니다.

2) Web Storage의 특징

• 키-값 형태로 데이터를 저장함 (문자열만 저장 가능)
• 쿠키와 달리 서버에 자동 전송되지 않음
• 브라우저 탭이나 세션마다 다르게 동작함

---

2. localStorage 사용법

1) 데이터 저장

localStorage.setItem('username', 'Alice');

2) 데이터 읽기

const username = localStorage.getItem('username');
console.log(username);  // 출력: Alice

3) 데이터 삭제

localStorage.removeItem('username');

4) 전체 데이터 삭제

localStorage.clear();

5) 특징

• 데이터가 브라우저를 닫아도 유지됨
• 동일한 도메인에 대해 영구적으로 저장됨
• 용량 제한: 약 5~10MB (브라우저에 따라 다름)

---

3. sessionStorage 사용법

1) 데이터 저장

sessionStorage.setItem('sessionId', '12345');

2) 데이터 읽기

const sessionId = sessionStorage.getItem('sessionId');
console.log(sessionId);  // 출력: 12345

3) 데이터 삭제

sessionStorage.removeItem('sessionId');

4) 전체 삭제

sessionStorage.clear();

5) 특징

• 데이터가 탭 또는 브라우저를 닫으면 삭제됨
• 동일한 탭에서만 유지되며, 새로 열린 탭에서는 공유되지 않음

---

4. 차이점 요약

항목	localStorage	sessionStorage
데이터 유지 기간	브라우저 종료 후에도 유지됨	브라우저 탭 종료 시 삭제됨
접근 범위	모든 탭과 창에서 공유됨	해당 탭에서만 유효함
저장 용량	약 5~10MB	약 5MB
사용 목적	로그인 상태 유지, 설정 정보 등	일시적 상태 저장 (검색 조건 등)
예시 사용처	자동 로그인, 테마 설정 저장	결제 중간 단계 데이터 유지 등

---

5. 추가 팁 및 참고 사항

• 숫자, 객체 등을 저장할 때는 반드시 JSON.stringify()와 JSON.parse()를 사용해야 함

const user = { name: 'Alice', age: 30 };
localStorage.setItem('user', JSON.stringify(user));
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name);  // 출력: Alice

• 민감한 정보(토큰 등)는 반드시 보안에 유의해야 하며 저장을 지양함

---

6. 요약 및 마무리

이번 포스팅에서는 JavaScript의 localStorage와 sessionStorage의 차이점과 사용 방법을 정리했습니다. 두 저장소 모두 클라이언트 측에 데이터를 저장할 수 있으며, 용도와 수명에서 차이를 보입니다. 상황에 맞는 저장소를 선택하고, 문자열 외의 데이터를 저장할 때는 JSON으로 변환하는 습관을 들이세요. 또한, 보안상 중요한 정보는 저장하지 않는 것이 좋습니다.

---

7. 관련 글 링크

• 관련 글: JavaScript에서 객체(Object)와 JSON 사용법 및 차이점 정리하기