브라우저 저장소의 분류
Cookie( 쿠키 )
: 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 저장소Web Storage( 웹 스토리지 )
: 웹 데이터를 클라이언트에 저장하기 위해 만들어진 저장소
쿠키의 단점을 보완하기 위해 HTML5에 추가된 'Local Storage'와 'Session Storage'를 의미
Cookies
🍪 웹 브라우저 상에 작은 '텍스트 파일' 로 저장되는 만료 기간이 존재하는 저장소
Cookie-name: Cookie-value 형태 의 저장소 구조를 가지고 있다.
Cookie-value는 '문자열 형태' 만을 가지며, 하나의 쿠키당 최대 4KB의 제한 용량을 가진다.
일정 시간 초과 후에 데이터를 무효화하는 것이 권장 되므로 만료기간을 가지고 있고,
쿠키는 자바스크립트로 접근이 가능하고 CSRF, 스니핑 등의 보안 취약점 이 있으므로
개인정보가 포함됨 보안정보를 사용해서는 안된다.
또 서버와의 통신을 목적으로 만들어졌기 때문에
쿠키 값이 많아지면 그만큼 네트워크 트래픽도 증가하므로 쓸모없는 값이 저장되지 않도록 주의해야한다.
쿠키는 세션 관리( 서버가 알아야할 정보: 로그인 및 사용자 정보, 접속시간 등 )와
개인화( 사용자에 맞는 페이지 제공 ), 트래킹( 사용자 행동 및 패턴 분석 ) 을 위해 사용되고,
'아이디 자동완성, 팝업창의 '오늘 하루 보지 않기', 미 로그인 상태의 '장바구니 담기' 등에 활용된다.
Web Storage
Key: Value 형태의 저장소 구조를 가지고 있다.
Value는 '문자열 형태' 만을 가지며 브라우저마다 상이하지만
최대 모바일은 2.5KB, 데스크톱은 약 5-10KB의 제한 용량을 가진다.
클라이언트 내에서만 유효하므로 서버에 전송하지 않아 자원 소모가 적고 필요한 경우에만 꺼내 쓰기 때문에 자동 전송되지 않는다.
Web Storage 의 Local Storage와 Session Storage의 가장 큰 차이점은 영구성 이다.
Local Storage
📍 만료기간이 존재하지 않으며 페이지를 변경하거나 브라우저를 닫아도 반영구적으로 유지되는 저장소
반영구적으로 브라우저를 종료하거나 OS를 종료해도 유지되며, 강제적으로 삭제나 초기화 시에만 사라진다.
동일한 도매인 내에서만 유효하며, 다른 도메인에서는 유효하지 않고 위의 Web Storage의 특성을 그대로 갖는다.
'자동 로그인' 기능 등에 활용된다.
Session Storage
📍 브라우저의 탭 안에 유효한 저장소이며, 브라우저를 닫는 경우 소멸되는 저장소
브라우저를 종료하거나 OS를 종료하면 사라지고 새로고침이나 브라우저 탭이 유지될 때에마 유지된다.
동일한 도메인과 탭에서만 유효하며, 다른 도메인이나 브라우저 내에서는 유효하지 않고,
위의 Web Storage의 특성을 그대로 갖는다.
'임시 유지되는 입력 폼 정보' 등의 '일회성' 정보에 활용된다.
