HTML5 웹 스토리지: 세션 저장소 vs 로컬 저장소
HTML5는 브라우저에 데이터를 저장할 수 있는 두 가지 웹 스토리지 메커니즘, 즉 세션 저장소(Session Storage)와 로컬 저장소(Local Storage)를 도입했습니다. 두 기능 모두 클라이언트 측에 데이터를 저장한다는 공통점이 있지만, 데이터가 유지되는 범위와 기간에서 중요한 차이를 보입니다.
세션 저장소(Session Storage)란?
세션 저장소는 사용자가 단일 트랜잭션을 수행하는 시나리오를 위해 설계되었습니다. 동시에 여러 창(탭)에서 서로 다른 트랜잭션을 진행하더라도 각 세션은 독립적으로 관리됩니다.
- 데이터는 현재 탭(창)의 세션이 유지되는 동안에만 유효합니다.
- 탭이나 창을 닫으면 해당 세션에 저장된 데이터는 즉시 삭제됩니다.
- 각 탭은 자신만의 독립적인 세션 저장소 영역을 가집니다.
로컬 저장소(Local Storage)란?
로컬 저장소는 여러 창과 탭에 걸쳐 데이터를 공유할 수 있고, 현재 세션이 종료된 이후에도 데이터가 지속되도록 설계되었습니다. 특히 웹 애플리케이션이 성능상의 이유로 사용자가 작성한 문서 전체나 메일함처럼 수 MB에 달하는 대용량 사용자 데이터를 클라이언트 측에 저장해야 할 때 매우 유용합니다.
localStorage 속성 활용하기
HTML5는 localStorage 속성을 제공하여 별도의 만료 기간 없이 페이지의 로컬 저장소 영역에 자유롭게 접근할 수 있습니다. 한 번 저장된 데이터는 브라우저에서 명시적으로 삭제하기 전까지 해당 페이지에 접속할 때마다 계속해서 사용할 수 있습니다.
// 데이터 저장
localStorage.setItem("username", "user123");
// 데이터 불러오기
const name = localStorage.getItem("username");
// 데이터 삭제
localStorage.removeItem("username");핵심 차이점 비교
| 구분 | 세션 저장소 | 로컬 저장소 |
|---|---|---|
| 데이터 유지 기간 | 탭/창이 열려 있는 동안만 | 만료 없음(영구적) |
| 공유 범위 | 단일 탭 내에서만 | 같은 출처의 모든 창·탭 |
| 주요 용도 | 일회성 트랜잭션, 임시 상태 관리 | 사용자 설정, 문서 등 장기 데이터 보관 |
정리
짧은 생명 주기의 임시 데이터를 다룰 때는 세션 저장소, 세션과 무관하게 오래 유지해야 하는 데이터를 다룰 때는 로컬 저장소를 선택하는 것이 바람직합니다. 두 스토리지의 특성을 정확히 이해하고 상황에 맞게 활용하면 더 빠르고 효율적인 웹 애플리케이션을 구축할 수 있습니다.