Web Storage
Web Storage란 HTML 5부터 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능이다.(쿠키와 비슷한 기능)
Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회하는 패턴이다.
영구 저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있다.
특징
- 서버전송이 없다
저장된 데이터가 클라이언트단에 존재할 뿐 서버로의 전송은 없다. 이는 네트워크 트래픽 비용을 줄여주는 역할을 한다. - 단순 문자열을 넘어 객체정보를 저장할 수 있다.
- 용량의 제한이 없다
기존 쿠키는 4KB로 제한되었는데 이에대한 문제해결이 가능하다 - 영구데이터의 저장이 가능하다
만료기단 설정이 없으며, 삭제하지 않는 한 영구적으로 존재한다.
로컬 스토리지(Local Storage)
브라우저를 닫았닫가 다시 열어도 데이터가 계속 유지된다. 명시적을 지우지 않는 이상 만료기간 없이 저장이 가능하여 자동로그인 등에 사용된다.
세션 스토리지(Session Storage)
로컬스토리지와 달리 만료기간이 있어 브라우저를 종료하거나 새탭을 열 때 데이터가 초기화가 된다.(같은 탭에서 새로고침 시에는 데이터가 유지)
즉, 로컬스토리지와 세션스토리지의 차이점은 바로 영구성이다.
입력폼 정보저장, 비로그인 장바구니, 글쓰기 도중 내용 복구 등에 사용된다.
쿠키(Cookie)
Cookies는 최대 4KB의 용량을 가진 매우 작은 양의 데이터입니다. Cookies는 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등 다양한 방법으로 사용됩니다. 그리고 문자열만 저장할 수 있다는 제한이 있습니다.
- 쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다.
- 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다는 특징이 있다.
- 클라이언트에 300개까지 쿠키 저장 가능, 하나의 도메인에 20개의 값만 가질 수 있다. 하나의 쿠키값은 4KB까지 저장한다.
- 쿠키는 매번 서버로 전송된다.
→ 쿠키는 용량과 개수에 제한이 있다.
→ 대용량은 저장이 불가능하다.
→ HTTP Request 에 암호화 되지않은 상태로 사용되기 때문에 보안에 취약하다.
→ 쿠키는 모든 HTTP Request에 포함되어 있어 웹서비스에 영향을 줄 수 있다
Cookie 두 가지 유형
Seesion cookies는 만료일을 포함하지 않습니다. 대신에 브라우저나 탭이 열려있는 동안에만 저장됩니다.
Persistent cookies는 만료일을 가집니다. 이 cookies는 만료일까지 유저의 디스크에 저장되고 만료일이 지나면 삭제됩니다.
쿠키 vs Web Storage
브라우저 저장소로 Cookie와 Web Storage가 있다. Cookie와 Web Storage 모두 해당 도메인과 관련된 데이터를 클라이언트 웹브라우저에 저장할 수 있도록 해준다. 둘 다 사이트의 도메인 단위로 접근이 제한된다. 예를 들면, A 도메인에서 저장한 데이터는 B 도메인에서 접근할 수 없는 것이다.
Cookie는 매번 서버로 전송되고, 문자열만 저장이 가능하며, 용량에 제한이 있고, 만료 일자가 존재한다. 이러한 부분들을 Web Storage를 사용함으로써 극복할 수 있다.
Web Storage는 데이터를 클라이언트에 저장만 할 뿐 서버로 전송되지는 않는다. 그리고 문자열 외에도 구조화된 객체를 저장할 수 있어 개발 편의성을 제공해주고, 하나의 사이트에서 저장할 수 있는 용량이 제한되어있지 않다. 또한, Web Storage에 한 번 저장한 데이터는 영구적으로 존재하게 된다.
WebStorage는 지속성에 따라 LocalStorage와 SessionStorage로 구분할 수 있다.
LocalStorage는 저장한 데이터를 명시적으로 지우지 않는한 영구적으로 보관이 가능하다. 도메인마다 별도로 LocalStorage가 생성되며, 도메인만 같다면 전역적으로 공유가 가능하다.
SessioniStorage는 데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다. 도메인마다 별도로 생성되는 점은 LocalStorage와 같지만, 같은 사이트의 도메인이라도 브라우저가 다르면 서로 다른 영역이 된다. 이는 브라우저 컨텍스트가 다르기 때문이다.
이처럼 Web Storage는 영구저장소(LocalStorage)와 임시저장소(SessionStorage)가 구분되기 때문에, 데이터의 지속성에 따라 선택이 가능하다.
