쿠키와 웹스토리지를 알기 전에 http 통신규약에 대해 먼저 설명해보려고 한다.
http?
http는 클라이언트가 서버에 request(요청)을 보내고 서버는 클라이언트에게 request에 대한 response(응답)을 보내고 접속을 종료하게 된다. 그리고 인증에 쓰는 상태 정보들을 유지하지 않는다는 특징을 가지게 된다. 이러한 특징은 계속해서 통신연결을 하지 않기 때문에 자원낭비가 줄어드는 것은 장점이지만, 통신을 할때마다 새로 연결을 해줘야 해서 클라이언트는 그때마다 새로 인증을 해줘야하는 단점을 가지게 된다.
예를 들면 웹사이트에 로그인을 할때도 페이지를 이동할때마다 계속 로그인을 해줘야해서 유저의 입장에서는 굉장한 불편함을 느낄 수 있다.
이런 단점을 해결하기 위해 브라우저스토리지를 사용하게 된다.
스토리지 = 저장소 라고 생각하며 되고, 브라우저의 저장공간이라고 생각하면 된다. 그리고 브라우저스토리지에는 쿠키와 웹스토리지가 있다.
웹스토리지와 쿠키 모두 해당 도메인에 대한 데이터를 브라우저에 저장한다.
1. 쿠키
쿠키는 서버가 클라이언트에게 전송하는 작은 데이터파일이며, 이름, 값, 도메인정보, 만료일자, 시간등의 정보가 담겨있다. 모든 브라우저에서 지원을 하지만 매번 서버에 전송이 되고 저장용량이 작고 보안에 취약하다는 단점을 가지고 있다
-> 이러한 쿠키의 단점을 보완하기 위해서 html5이후부터 웹스토리지가 등장하게 되었다.
2. 웹스토리지
웹스토리지는 쿠키와 기능은 비슷하지만 클라이언트에 저장만할 뿐 서버로 전송이 되지 않는다. 그리고 키와 값(value)의 형태로 데이터를 저장한다.
웹스토리는 지속성에 따라 로컬스토리지와 세션스토리지로 구분할 수 있다.
2-1 로컬 스토리지
로컬스토리지는 브라우저 자체에 반영구적으로 데이터를 저장하고 브라우저를 종료해도 데이터가 유지된다.
2-2 세션스토리지
탭윈도우 단위로 생성되고 탭윈도우를 닫을 때 데이터가 삭제된다는 특징을 가진다.
🥸 이러한 특징을 살려 각 스토리지를 어떻게 이용하면 좋을까
쿠키 : 다시보지 않기 팝업창
로컬스토리지 : 자동로그인 기능
세션스토리지 : 입력 폼 정보나 비로그인 장바구니 기능 구현
referense
쿠키와 웹스토리지
