개념
Cookie와 Web Storage에 대해 알아보기 전에 어떤게 먼저인지를 알아야한다.
Cookie는 기본적으로 HTTP의 특성을 보완하기 위해 나온 존재다.
그렇다면 일단 기본적으로 HTTP 의 특성에 대해서 간단히 짚고 넘어가보자.
HTTP의 특징
1. 비연결성
클라이언트와 서버가 한번 연결은 맺은 후, 클라이언트 요청에 대해 서버가 응답을 마치면 연결을 해제한다.
이러한 특징에는 장, 단점이 존재하는데
장점 으로는, 연결을 계속해서 유지하지 않기 때문에 리소스를 절약하여 더 많은 연결을 할 수 있다는 점인데
HTTP는 기본적으로 인터넷 상의 불특정 다수를 대상으로한 통신 환경을 기반으로 설계되었기때문에
서버와 다수의 클라이언트가 연결을 계속 유지해야한다면, 과도한 리소스가 발생한다.
따라서 HTTP는 이러한 문제를 해결하기 위해 비연결적 성질을 가지고 있다.
단점 으로는, 서버가 매번 클라이언트에 대한 연결을 끊기 때문에
클라이언트를 기억하지 못하고, 그에 따라 동일한 클라이언트의 요청에도 매번 새로운 연결을 해야한다는 점이 있다.
2. 무상태성
여기서 상태가 없다는 것은 어떤것을 의미할까 ?
내가 어떠한 홈페이지에 로그인을 한 다음, 로그인이 된 상태를 계속 유지하고 있어야 하는데
이러한 상황에서 서버는 클라이언트에 대한 상태를 가지고있지 않기 때문에, 계속 로그인을 해줘야하는 문제가 발생하는데
이를 무상태성 이라고 할 수 있다.
Cookie
그렇다면 쿠키에 대해 알아보기 전에 왜 HTTP에 대해 먼저 알아야 했을까 ?
그 이유는 쿠키의 탄생 자체가 이러한 HTTP의 무상태성에서 오는 불편함을 해결하기 위해 만들었기 때문이다.
따라서 쿠키 는 HTTP의 무상태성을 보완하기 위해 매 요청마다 계속해서 서버로 같이 전송 된다는 특징이 있다.
Web Storage
하지만 쿠키를 사용하는 것에도 큰 문제가 있는데
그것은 바로 사용자 정보가 브라우저에 저장되어 공격당할 시에 위,변조의 가능성이 높다는 점이다.
이를 해결하기 위해 브라우저에 저장할 수 있는 공간을 만들었는데,
이것이 바로 Web Storage이다.
Web Storage는 Local Storage와 Session Storage로 나누어진다.
Local Storage
Local Storage는 기본적으로 window.localStorage 에 존재하며, key와 value로 값을 저장해주는 객체의 형태를 띈다.
기본적인 동작으로는 setItem, getItem, removeItem, clear 가 있다.
localStorage.setItem('myName', 'sangmin');
localStorage.getItem('myName'); // sangmin
localStorage.removeItem('myName');
localStorage.getItem('myName'); // null (삭제되었기 때문)
localStorage.clear(); // 전체 삭제LocalStorage 의 가장 큰 *특징은 따로 값을 제거하지 않는다면 계속해서 영구적으로 브라우저의 Local Storage에 남아있는다 는 점이다.
Session Storage
Session Storage 는 동작은 Local Storage의 사용법과 동일하며
Local Storage와 비교되는 가장 큰 특징은 영구적으로 보관되는 것이 아니라
브라우저를 종료하거나 윈도우를 종료할 경우 값이 사라지는 특징을 가지고 있다.
