HTTP
우리가 사용하는 HTTP의 프로토콜 특성이자 약점을 보완하려고 쿠키나 세션을 사용합니다.
HTTP 프로토콜은 비연결성(connectonless), 무상태 프로토콜(stateless) 특징을 가집니다.
- 비연결성이란 HTTP는 기본이 연결을 유지하지 않는 모델로 클라이언트가 요청을 한 후 응답을 받으면 그 연결을 끊어 버리는 특성이고,
- 무상태 프로토콜은 서버가 클라이언트의 상태를 보존하지 않는 것으로 연결을 끊으면 상태 정보를 유지하지 않는 특성이다.
이러한 특성들 때문에 서버는 클라이언트가 누구인지 계속 확인해야 하므로, 이를 보완하기 위해 쿠키를 사용한다.
브라우저 저장소에 대해 알고 가려면 쿠키에 대해 한번 알아보고 가는 것이 좋습니다.
쿠키
쿠키란?
쿠키는 클라이언트에 저장되는 키와 값이 들어가있는 작은 데이터 파일입니다.
사용자가 웹 브라우저를 이용하여 웹사이트에 접속할 때, 해당 웹 사이트에서 이용자의 웹 브라우저에 일정한 상태 정보를 보내고 웹 브라우저는 이를 작은 크기의 텍스트 파일로 만들어서 사용자의 컴퓨터(로컬)에 저장합니다.
사용하는 곳
쿠키에 이용자의 로그인 정보를 저장하면, 다른 웹사이트를 갔다오더라도 반복해서 로그인하는 수고를 없앨 수 있다.
쇼핑의 경우 마음에 드는 물건을 카트에 담아두는 경우 다른 웹사이트를 갔다오더라도 다시 카트에 내용을 불러올수 있다.
쿠키의 동작방식
- 클라이언트가 페이지를 요청
- 서버에서 쿠키를 생성
- HTTP 헤더에 쿠키를 포함시켜서 응답
- 브라우저가 종료하더라도 쿠키 만료 기간이 있다면 클라이언트에서 보관
- 클라이언트가 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
- 서버에서 쿠키를 보고 상태 정보를 변경 할 필요가 있을 경우 업데이트한 쿠키를 HTTP헤더에 포함시켜 응답
브라우저 저장소
web storage
웹 스토리지를 사용하면 웹 어플리케이션이 사용자의 브라우저 내에 로컬로 데이터를 저장할 수 있다.
HTML5 이전에는 애플리케이션 데이터가 모든 서버 요청에 포함된 쿠키에 저장됬는데 쿠키에 비해 웹 저장소는 더 안전하고 웹 사이트 성능에 영향을 주지 않으며 많은 양의 데이터를 로컬에 저장할 수 있다.
특징
- 서버 전송이 없습니다. 저장된 데이터가 클라이언트에 존재하고 서버로 전송하지 않습니다.
- 단순 문자열 뿐만이 아니라 객체 정보를 저장할 수 있다.
- 영구 데이터 저장이 가능합니다.
쿠키의 단점
4KB 데이터 저장으로 제한
HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안이 취약
Web Storage와 쿠키의 비교
-
쿠키는 매번 서버로 전송한다.
쿠키를 사용하면 모든 웹 요청은 쿠키 정보를 포함하여 서버로 전송하는데, web storage는 클라이언트에 존재할뿐 서버로 전송되는 것이 아니라 네트워크 트래픽 비용을 줄여준다고 합니다. -
Web Storage는 문자열 뿐만 아니라 객체도 저장할 수 있습니다.
-
Web Storage는 용량의 제한이 없습니다.
쿠키는 클라이언트에 최대 300개의 쿠키를 저장할 수 있고 하나의 쿠키는 최대 4KB로 제한됩니다. Web Storage는 이런 제한이 없습니다. -
쿠키는 만료일자를 지정해야되서 언젠가 제거 되지만, Web Storage는 영구적으로 존재합니다.
sessionStorage와 localStorage
-
localStorage
저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능
브라우저를 닫았도 계속 유지됨
도메인마다 로컬스토리지가 별도로 생성되고, windows의 LocalStorage를 통해 저장과 조회 가능 -
sessionStorage
브라우저를 닫으면 삭제된다.
windows의 SessionStorage를 통해 저장과 조회 가능
이 친구는 같은 사이트의 같은 도메인이라도 브라우저가 다르면 서로 다른 영역이라고 합니다.
사용 예시
- 입력 폼 정보 ==> 세션 스토리지
- 비로그인 장바구니 ==> 세션 스토리지
- 상세페이지에서 목록 페이지로 이동할 때 스크롤 위치 값 ==> 세션 스토리지
- 자동 로그인 기능 ==> 로컬 스토리지
- 다크모드와 라이트모드 기능 ==> 로컬 스토리지
