Cookie vs localStorage vs sessionStorage

 

 

🍪 Cookie

쿠키는 브라우저에 저장되는 작은 크기의 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부이다.

 

특징은 다음과 같다.

 

- 키-값의 저장

- 클라이언트 식별과 같은 인증에 많이 쓰인다.

- 4KB 용량 제한을 갖는다.

- 웹 서버에 의해 생성되며 서버가 HTTP 응답 헤더의 Set-Cookie에 내용을 넣어 전달하면 브라우저는 이 내용을 자체적으로 브라우저에 저장된다.

- 매 서버 요청마다 쿠키도 함께 전송된다. 만약 쿠키 사이즈가 커지면 HTTP 요청 크기도 커진다.

- 쿠키 조작 방지를 위해 httpOnly를 설정하는 것이 좋다.

- 보통 브라우저를 닫는 순간 없어지며 유효 기간을 설정할 수도 있다.

 

 

🤔 왜 서버에 쿠키가 같이 전송될까?

HTTP 요청은 상태를 갖지 않는다. 즉, 서버는 요청이 누구에게 오는지 알 수 없으므로 쿠키에 요청을 보내는 사람의 정보를 담아 서버로 보내면 서버는 받은 쿠키를 읽어 그 사람에게 응답을 보낼 수 있다.

 

쿠키는 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문에 서버로 계속 전송되는 것이다.

 

 

Cookie 쓰기

- key=value 쌍으로 구성되어 있으며 각 쌍은 ';'러 구분한다.

- document.cookie에 값을 할당하면 브라우저는 이 값을 해당 쿠키 값만 갱신한다.

document.cookie = 'key=value';

 

Cookie 읽기

document.cookie;

 

Cookie 유효 기간 설정

- Cookie는 브라우저를 닫는 순간 없어지므로 유효 기간을 정의해 특정 기간까지 유효하도록 설정할 수 있다.

- 유효 기간은 GMT String로 작성한다.

- GMT String 값은 toGMTString()으로 구할 수 있다.

- 유효 기간을 설정해 '일주일 간 해당 팝업 보지 않기' 등을 구현할 수 있다. 일주일 간 유요한 쿠키를 브라우저에 저장해 해당 쿠키가 존재한다면 팝업을 보이지 않도록 하는 것이다.

document.cookie = 'user=tom; expires=Wed, 18 Aug 2021 02:13:37 GMT';

- max-age를 이용하면 생성 시점을 기준으로 유효 기간을 설정할 수도 있다.

document.cookie = 'user=tom; max-age=100';

 

 

 

 

💾 Local Storage

- 쿠키의 단점을 보완한다.

- key, value 기반으로 데이터를 저장한다.

- 도메인 기반으로 Storage가 생성된다. 만약 도메인만 같다면 여러 탭 내에서 같은 Storage가 공유된다.

- 데이터의 만료 시간이 없다.

 

localStorage 쓰기

localStorage.setItem('name', 'tom');

 

localStorage 읽기

읽고 싶은 데이터의 키 값을 작성하여 데이터를 가져올 수 있다.

localStorage.getItem('name');

 

localStorage 삭제하기

localStorage.removeItem('name'); // 특정 데이터만 삭제할 때
localStorage.clear(); // 모든 데이터를 삭제할 때

 

 

 

💾 Session Storage

- 전체적인 특징은 Local Storage와 비슷하다.

- 쿠키의 단점을 보완한다.

- key, value 기반으로 데이터를 저장한다.

- 페이지를 새로 고침해도 데이터는 남아 있지만, Local Storage와 다르게 브라우저를 닫으면 저장된 내용이 삭제된다.

 

 

 

 

🪄 Local Storage vs. Session Storage

모두 HTML5에 추가된 저장소(웹 스토리지)이다. 

 

공통점

- 모두 key-value 형태로 데이터가 저장된다.

- 두 저장소는 모두 window 객체 안에 존재한다.

- 두 저장소 모두 Storage 객체를 상속받아 메서드가 공통적으로 존재한다.

- 저장된 데이터는 클라이언트 측에 저장되며 서버로 전송이 이루어지지 않는다.

- 쿠키의 단점을 보완한다. 서버에 전송하지 않아도 되는 데이터는 쿠키가 아닌 Local Storage나 Session Storage에 저장하여 데이터의 낭비를 막을 수 있다.

- 쿠키와 다르게 HTTP 헤더를 통해 웹 스토리지 객체를 조작할 수 없다.

 

차이점

가장 큰 차이점은 데이터의 지속성(영구성)이다.

 

Local Storage는 영구 저장소라고 부르며 사용자가 데이터를 지우지 않는 한 계속 브라우저에 저장되어 있다. 하지만 임시 저장소라 부르는 Session Storage의 데이터는 윈도우나 브라우저 탭을 닫을 경우 삭제된다.

 

 

🍪 쿠키도 브라우저의 저장소의 역할을 하지만 Local Storage, Session Storage와 다르게 만료 기한이 있는 key-value 저장소이다. 

 

 

 

🙌 총정리

- Cookie : 팝업 창(광고 일주일 간 띄우지 않기)

- Local Storage : 자동 로그인

- Session Storage : 입력 폼 정보, 비로그인 장바구니, 일회성 로그인 정보

 

 

 

 

참고 자료

https://ko.javascript.info/cookie

https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048