웹 브라우저 Storage

웹 스토리지란?

웹 스토리지는 HTML5부터 도입된 기술로 웹 브라우저 자체에 데이터를 저장할 수 있도록 해준다.

쿠키와 유사하면서도 몇 가지 차이가 있다.

 

웹 스토리지의종류

로컬 스토리지 (localStorage)

데이터가 브라우저에 영구적으로 저장된다. 브라우저를 닫거나 컴퓨터를 재시작해도 데이터는 유지된다. 사용자가 직접 삭제하거나 웹 애플리케이션에서 삭제 코드를 실행해야만 삭제된다.

 

세션 스토리지 (sessionStorage)

데이터가 브라우저 탭이나 창이 열려 있는 동안에만 유지된다. 탭이나 창을 닫으면 데이터는 자동으로 삭제된다.

 

웹 스토리지 특징

• 더 큰 저장 용량: 쿠키는 일반적으로 4KB 정도의 작은 용량만 저장할 수 있지만 웹 스토리지는 5MB 이상의 훨씬 큰 용량을 저장할 수 있다.
• 서버로 전송되지 않음: 쿠키와 달리 웹 스토리지 데이터는 HTTP 요청에 포함되어 서버로 자동 전송되지 않는다. 불필요한 네트워크 트래픽을 줄이고 개인 정보 보호에도 도움이 된다.
• JavaScript를 통한 접근: 웹 스토리지 데이터는 JavaScript를 통해 쉽게 접근하고 관리할 수 있다. localStorage 및 sessionStorage 객체를 사용하여 데이터를 저장, 조회, 수정, 삭제할 수 있다.
• 동일 출처 정책 적용: 웹 스토리지는 동일 출처 정책(Same-Origin Policy)을 따른다. 특정 웹 페이지는 해당 페이지와 동일한 출처(프로토콜, 도메인, 포트)를 가진 웹 스토리지 데이터에만 접근할 수 있다.

 

웹 스토리지의 활용 예시

• 사용자 설정 저장: 웹 애플리케이션의 테마, 언어 설정, 레이아웃 등 사용자 맞춤 설정을 저장한다.
• 오프라인 기능 지원: 웹 애플리케이션에서 필요한 데이터를 로컬 스토리지에 저장하여 인터넷 연결이 끊어져도 일부 기능을 사용할 수 있도록 한다.
• 쇼핑 카트 정보 저장: 사용자가 장바구니에 담은 상품 정보를 세션 스토리지에 저장하여 브라우저를 닫기 전까지 유지한다.
• 웹 게임 진행 상태 저장: 웹 게임의 진행 상태, 점수 등을 로컬 스토리지에 저장하여 사용자가 게임을 종료하고 다시 시작할 때 이어서 플레이할 수 있도록 한다.

 

웹 스토리지 vs 쿠키

특징	웹 스토리지	쿠키
저장 위치	브라우저	브라우저
저장 용량	10MB	4KB
서버 전송	X	X
접근 방법	JavaScript	JavaScript, HTTP 헤더
주요 용도	클라이언트 데이터 저장	사용자 식별, 상태 관리
보안	동일 출처 정책 적용	쿠키 관련 보안 설정 필요 (HttpOnly, Secure, SameSite)