[Javascript] localStorage / sessionStorage / Cookie

로컬 스토리지 (localStorage)

- 로컬에 도메인 별로 지속되는 storage

- localStorage는 시간제한이 없고 브라우저가 꺼져도 죽지 않기 때문에 값을 지워주려면 직접 지워줘야한다.

- 용량: 약 5-10MB

- 전송: HTTP 요청 시 자동 전송되지 않는다.

localStorage.setItem("token", "abc");
localStorage.getItem("token");
localStorage.removeItem("token");

 

세션 스토리지 (sessionStorage)

- 세션이(프로세스, 탭, 브라우저) 종료될 때까지 지속되는 storage

- 세션 스토리지는 소멸 타이밍이 있어 세션이 끊기면 함께 사라진다.

- 용량: 로컬 스토리지와 비슷

- 전송: 자동으로 전송되지 않는다.

sessionStorage.setItem("step", "2");

 

쿠키 (Cookie)

- 데이터이면서, 우리가 현재 사용하는 컴퓨터에 작은 텍스트 파일로 저장되어 있는 것이다.

- 서버가 나의 브라우저에 "이걸 기억해줘" 하고 남겨두는 정보라고 생각하면 쉽다

- 예를 들어 로그인 정보, 장바구니 내용, 방문 기록 등을 저장 가능하다.

- 저장 위치는 브라우저이며, 크기는 4KB 정도로 작다.

- 또한 같은 사이트에 요청할 때 자동으로 함께 보내지며 유효기간도 직접 정할 수 있다.

- 쿠키의 한계: 도메인 하나 당 저장할 수 있는 쿠키의 개수는 20여 개 정도로 한정되어 있다.

var a = document.cookie; // read
document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT" // write
document.cookie = "username = 홍길동"; // create
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC"; // create
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/"; // create
document.cookie = "user=John"; // change
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; // delete
document.cookie = "max-age=3600"; // delete
document.cookie = "max-age=0"; // delete