Web Storage
- 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장한다.
- html5부터 제공되는 기능이다.
- 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회한다.
- 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다.
- 보안을 위해 도메인 단위로 접근이 제한된다.
Cookie는 아래와 같은 단점이 있다.- 4KB의 데이터 저장 제한
- 암호화 되지 않아 보안에 취약
- 모든 HTTP Request에 포함되어 웹서비스 성능에 영향을 줌
Cookie와 Web Storage의 차이
Cookie는 매번 서버로 전송되지만,Web Storage는 클라이언트에만 저장될 뿐 서버로 전송되지는 않기 때문에 네트워크 트래픽 비용을 줄여준다.Web Storage는 문자열 기반 데이터 외에 구조화된 객체(스크립트)를 저장할 수 있다.Cookie는 클라이언트에 최대 300개, 한 도메인에 최대 20개를 저장할 수 있으며 각 쿠키는 4KB의 제한이 있다. 반면에Web Storage는 용량의 제한이 없다.Cookie는 언젠가 만료되어 제거되지만,Web Storage는 영구적으로 존재한다.
Web Storage의 종류
LocalStorage: 브라우저를 닫았다가 열어도 유지된다.SessionStorage: 페이지를 Reload해도 유지되지만, 브라우저를 닫으면 삭제된다.- 서버에 저장되는
Session과 달리 로컬 브라우저에 저장된다. Cookie는 정보를 클라이언트에 저장하지만,Session은 서버에 저장하여 보안은 좋지만 서버에 과부하를 줄 수 있다.
- 서버에 저장되는
LocalStorage
지속적으로 필요한 데이터 저장에 사용 (자동 로그인)
- 저장한 데이터를 명시적으로 지우지 않는 한 영구적으로 보관할 수 있다.
- 도메인마다 별도의 스토리지가 생성되며, 도메인만 같으면 전역적으로 공유된다.
- 브라우저를 종료해도 데이터가 유지된다.
- 간단한 API로 사용이 편리하지만, 서버와의 데이터 동기화가 필요한 경우 별도의 로직이 필요하다.
- 클라이언트에 저장되기 때문에 보안에 취약할 수 있다.
- 용량 제한이 있을 수 있으며, 너무 많은 데이터를 저장하면 성능이 저하된다.
SessionStorage
일시적으로 필요한 데이터 저장에 사용 (일회성 로그인)
- 데이터의 지속성과 액세스 범위에 제한이 존재한다.
- 도메인마다 별도의 스토리지가 생성되지만, 같은 도메인이라도 브라우저가 다르면 서로 다른 영역이 된다.
- 브라우저를 종료하면 데이터도 자동으로 삭제된다.
- 클라이언트에서 데이터를 저장하고 관리하기 때문에 서버의 부하를 줄일 수 있다.
LocalStorage보다 용량이 제한적이다. 저장된 데이터가 삭제되기 때문에 대용량 데이터를 저장하기 적합하지 않다.
