이번 주에 강의할 주제는 Cookie와 WebStoarge인 LocalStorage와 SessionStorage다.
이번엔 빠르게 핵심만 정리하려고 한다.
0. 얘내들을 왜 쓸까?
HTTP는 stateless하다는 특성을 갖고 있기 때문이다.
여기서 stateless는 상태를 저장하지 않는다는 뜻인데, CS에서 state는 쉽게 data라고 보면 된다.
즉, 새로운 웹에 다시 접속했을 때, 기본적으로 웹브라우저는 이전의 상태 정보를 저장하지 않기 때문에 특정 정보를 저장해야 할 때 사용한다고 보면 된다.
모든 상황에서 로그인 등을 해서 서버에 데이터를 저장하는 과정을 지날 수 있는 것이 아니다. 비로그인 상태의 장바구니나, 자동로그인 장치와 같이 서버에서 저장해둘 수 없는 정보들이 있기에, 이런 상태를 웹 / 브라우저를 껐다가 켜도 데이터를 남기기 위해 필요한 것이다.
1. Cookie
브라우저에 저장되는 작은 크기의 문자열
쿠키는 key = value 형식으로 저장된 데이터를 의미한다.
개발자 도구의 Application에 들어가면 Cookies탭에서 확인할 수 있는데, 이를 살펴보자.
보면 내가 접속한 도메인마다 다른 쿠키를 저장할 수 있게 되어있는 것을 볼 수 있다.
이렇게 쿠키가 존재하는 동일한 도메인(서버)에 접속해 Request를 보낼 때마다, 쿠키의 데이터를 함께 전달한다.
그런데 모든 Request마다 쿠키를 전달하는게 이상적이지는 못하다. 이에 출현한 개선책이 WebStoarge인 LocalStorage와 SessionStorage이다.
2. WebStorage
위 둘을 묶어서 WebStorage라고 한다.
WebStorage의 특징은 이러하다.
- getItem, setItem, removeItem 메소드를 이용하여 쉽게 생성하고, 접근할 수 있다.
- Request시 서버에 전달하지 않는다.
- 쿠키와 비교가 안 될 정도로 용량이 크다. ( 4KB인 쿠키와 다르게, 최소 2MB. 이는 브라우저마다 다르다. )
- JS로만 조작이 가능한줄만 알았는데 아니었다. 서버의 HTTP Header를 통해서 조작할 수 없다고 하는게 정확하다.
3. LocalStorage
브라우저를 꺼도, 컴퓨터를 껐다켜도 지워지지 않는 데이터.
그럼 어떻게 지우나? localStorage.removeItem(key) 쓰자. ( 아니면 가끔 clearStorage 버튼을 눌러도 괜찮고 )
4. SessionStorage
세션이 유지되는 동안만 남아있는 데이터.
여기서 세션의 유지라 함은 페이지 리로딩, 탭 지웠다가 되돌리기까진 포함이다.
탭을 닫고 다시 그 탭을 열어보자. 세션의 데이터가 지워졌는지는 console에 찍어서 확인해보자.
