프로젝트를 해봤다면 자주 접하게되는 쿠키, 세션, 웹스토리지에 대해 알아볼 것이다.
그 전에, HTTP 프로토콜이란 것을 알아야 더 이해하기 쉽기에 간략히 알아보자.
HTTP는 인터넷 상에서 데이터를 주고 받기 위한 서버/클라이언트 모델을 따르는 프로토콜이다.
기본적으로 HTTP 프로토콜의 환경은 비연결성지향(connectionless), 무상태(stateless)한 특성을 가지기 때문에 요청만으로는 서버는 클라이언트를 구별할 수 없다.
즉, 클라이언트의 로그인 정보나 브라우저에서 입력한 값 등이 페이지를 이동할 때마다 초기화되는 것이다.
이러한 문제점을 해결하기 위해 데이터 저장에 사용되는 것이 쿠키,세션,웹스토리지 이다.
내가 만든 쿠키~ 너를 위해 구웠지~!
클라이언트(브라우저) 로컬에 저장되는 키와 값 형태의 작은 파일로, 이름, 값, 만료시간, 경로정보가 들어있다.
클라이언트의 상태 정보를 로컬에 저장했다가 참조한다.
클라이언트에 300개까지 쿠키저장 가능, 하나의 도메인당 20개의 값만 가질 수 있으며, 하나의 쿠키 값은 4KB 까지 저장이 가능하다.
Response Header 에 set-cookie
속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.
만들어진 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request 사이에 Request Header 를 넣어서 자동으로 서버에 전송한다.
주로 아래 세 가지 목적을 위해 사용된다.
클라이언트가 Request 를 보내면 Response 에 set-cookie
를 통해 클라이언트의 유일한 ID 값을 생성해 부여하고,
이를 통해 사용자 정보는 안전한 서버에 존재하며 클라이언트와 서버간에는 id 값만을 전달해 보안 위협을 감소시켜 준다.
Key-Value
스토리지 형태localStorage.setItem('test', 1);
설정 후 브라우저를 닫고 열어보자. 다른 창에서도 본 페이지를 열어봐도 된다. 그럼 아래와 같은 결과가 나온다.
alert( localStorage.getItem('test') ); // 1
오리진(도메인, 포트, 프로토콜)만 같다면 URL 경로는 달라도 동일한 결과를 볼 수 있다.
localStorage
는 동일한 오리진을 가진 모든 창에서 공유되기 때문입니다. 따라서 한 창에 데이터를 설정하면 다른 창에서 변동 사항을 볼 수 있습니다.
sessionStorage
에 저장된 데이터는 사라지지 않는다. 하지만 탭을 닫고 새로 열 때는 제거.sessionStorage.setItem('test', 1);
이제 페이지를 새로 고침 해봐도 데이터가 여전히 남아있는 것을 볼 수 있다.
alert( sessionStorage.getItem('test') ); // 새로 고침 후: 1
하지만 다른 탭에서 본 페이지를 열고 바로 위 예시만 실행해보면 '아무것도 찾을 수 없다’는 뜻을 가진 null
이 반환된다.
이렇게 sessionStorage
는 오리진뿐만 아니라 브라우저 탭에도 종속되어 있다. 이런 제약 때문에 sessionStorage
는 잘 사용되지 않는다.
쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용해 데이터를 저장하는걸까?