[Storage]Cookie vs Local Storage vs Session Storage 차이점

웹 개발을 하다보면 자연스레 접하게 되는 Cookie, Local Storage, Session Storage의 차이점에 대해서 포스팅해보려고 합니다.

각각 다르다는 것은 알겠지만, 무엇이 어떻게 다를까요?

 

Cookie 란?

쿠키란 인터넷 사용자가 웹 사이트를 방문할 경우 해당 웹 사이트의 서버를 통해 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일입니다.

주로 팝업창과 같은 경우에 이용될 수 있습니다.

Cookie 의 특징

• 웹 사이트에서 쿠키가 설정되면 이후에 일어나는 모든 웹 요청에 쿠키 정보를 포함시켜 웹 사이트의 서버로 전송합니다.
• 하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개이고, 총 크기는 4KB로 제한되어 있습니다.
• 쿠키는 만료일자를 지정할 수 있어, 지정된 날짜에 자동으로 제거됩니다. 
  (만료일자를 지정하지 않을 경우 브라우저가 닫힐 때 쿠키도 같이 제거됩니다.)
• 쿠키에 대해 HttpOnly 플래그를 true로 설정할 경우, 쿠키에 대한 클라이언트 측에서의 엑세스가 차단됩니다.

Cookie 장단점

장점

• 서버에 대한 저장공간을 절약할 수 있습니다.

단점

• 매 요청시마다 Http Header에 쿠키에 대한 정보가 추가되기 때문에 상당한 트래픽을 발생시킵니다.
• 요청시 쿠키 값을 그대로 보내므로 보안에 취약합니다.

 

---

Local Storage 란?

HTML5에서 포함된 WebStorage 스펙중 하나로 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 방식입니다. 한번 저장한 데이터는 지우기 전까지 영구적으로 보존됩니다.

주로 자동 로그인과 같은 경우에 사용됩니다.

Local Storage 의 특징

• LocalStorage는 데이터를 지우지 않는 이상 영구적으로 존재합니다. (브라우저를 종료해도 유지됩니다.)
• 키/값 쌍으로 데이터가 이루어져 있습니다.
• 용량의 제한이 없습니다.

Local Storage 장단점

장점

• 저장된 데이터는 서버로 전송되지 않아, 트래픽이 줄어듭니다.

단점

• HTML5 미만의 브라우저에서는 지원이 되지 않습니다.

 

---

Session Storage 란?

HTML5에서 포함된 WebStorage 스펙중 하나로 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 방식입니다. 세션을 종료(브라우저를 닫음)할 경우 데이터는 삭제됩니다.

주로 비 로그인 장바구니와 같은 경우에 사용됩니다.

Session Storage 의 특징

• Session Storage는 세션을 종료할 경우 데이터가 삭제됩니다.
• 키/값 쌍으로 데이터가 이루어져 있습니다.
• 용량의 제한이 없습니다.

Session Storage 장단점

Session Storage와 동일하며, 단지 데이터 삭제 유무에 따른 기능 차이만 있습니다.