쿠키, 세션, 캐시, 로컬스토리지 정리

Cookie vs LocalStorage vs SessionStorage

이전 시간에 정리한 블로그 글은 업데이트 한다는 마음으로 다시한번 개념에 대해 정리해보는 시간을 가지려 합니다.

우선 이것들을 알아보기전에 HTTP의 개념부터 알아봐야 하는데요.

 

간단하게 설명하자면 HTTP는 상태가 없는(Stateless) 프로토콜이기 때문에 사용자가 웹 브라우저를 통해서 특정 

웹사이트에 접속하게 될 경우에 어떤 사용자가 접속을 했는지에 대한 정보를 파악할 수 없습니다.

 

따라서 쿠키 또는 세션을 사용해 사용자를 구분하고 각 사용자에 맞는 정보를 제공합니다.

 

Cookie?

• 쿠키는 클라이언트가 서버쪽에 방문한 기록에 대한 정보들을 클라이언트 단에 저장하는 작은 파일을 의미합니다.
• 클라이언트의 브라우저 메모리 혹은 하드디스크에 저장됩니다.
• 대략 4KB까지의 데이터들을 저장할 수 있으며 유효기간이 존재합니다.
• 대부분 브라우저쪽에서 지원합니다.
• 클라이언트에 저장되기 때문에 보안에 취약하다는 단점
• SmaeStie 옵션이 Strict이 아닐 경우, 다른 도메인에서 요청을 할 때도 자동 전송되는 위험이 있습니다(CSRF 취약)

Session?

• 세션은 브라우저가 서버에 연결되어 있는 동안에 유지하는 데이터 집합입니다.
• 클라이언트는 HTTP Session ID를 메모리에 저장된 형태로 가지고 있습니다.
• 메모리에 저장되기 때문에 브라우저가 종료될때 즉시 사라지게 됩니다.
• 서버의 리소스를 쓰기 때문에 세션을 많이 사용하면 서버의 리소스를 많이 쓰게됩니다.
• 세션을 사용하면 서버를 확장시키는 것이 여러워 집니다.

Web Storage?

• 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소입니다.
• 키(Key)와 값(Value)의 쌍 형태로 데이터를 저장합니다.
• 쿠키와는 달리 서버에 전송되지 않으므로 서버에 부담이 가지 않습니다.
• 필요한 경우에만 꺼내 쓰는 것이므로 자동 전송의 위험이 없습니다(CSRF 안전)
• 대략 5MB까지의 데이터만 저장할 수 있고, 유효기간은 존재하지 않습니다.
• HTML5를 지원하지 않는 브라우저에서는 사용할 수 없습니다.

Local Storage?

• window.localStorage 객체
• 브라우저를 종료해도 유지되는 데이터며, 명시적으로 지우지만 않는다면 영구적으로 저장됩니다.
• 도메인 별로 생성되며, 다른 도메인의 로컬 스토리지에는 접근이 불가능합니다.
• 서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지를 사용합니다.
• 지속적으로 필요한 정보를 저장하게 됩니다. (예: 자동로그인)

Session Storage?

• window.sessionStorage 객체
• 세션 쿠키와는 달리 탭/윈도우 단위로 세션 스토리지가 생성됩니다.
• window 객체와 동일한 유효 범위 및 생존 기간을 가지며, 탭/윈도우를 닫을 시 데이터가 삭제됩니다.
• 서로 다른 세션 스토리지는 서로 영향을 주지 않으며 독립적으로 동작합니다.
• 잠시 동안 필요한 정보를 저장하기에 좋습니다. (예: 일회성 로그인, 입력 폼 저장)

자세한 설명

이렇게 글로만 정리하면 정리가 안되기에 직접 브라우저에 들어가 개발자 정보를 켜서 설명드리겠습니다.

 

Local Storage?

우리가 자주 사용하는 네이버를 기준으로 설명드리면 우선 Local Storage에 특징을 설명하지면 

• key/value의 pair로 데이터를 저장합니다.
• Javascript/HTML을 통해서만 데아터에 접근이 가능합니다.
• no expiration date는 직접 지울때까지 남아있습니다.
• 약 5MB의 저장 공간을 가집니다.
• Local Storage의 데이터는 api 호출에 담을 수 없기에 서버에 전송이 불가능합니다.
  (=클라이언트에서만 저장 데이터 조회 가능) 
• string data(문자열 데이터)로 저장이 제한됩니다., 따라서 용이하게 사용하기 위해 직렬화(String)화가 필요합니다.
  • 직렬화란?

---

Session Storage?

• session쪽에는 기간에만 데이터를 작성합니다. 즉 브라우저(또는 탭)이 꺼진다면 데이터는 소실됩니다.(보안에 유리)
• 약 5-10MB의 저장 공간을 가집니다.
• Session Storage의 데이터는 api 호출에 담을 수 없기 때문에 서버에는 전송이 불가합니다.
  (=client에서만 저장 데이터 조회 가능)
• 같은 주소의 URL 창을 여러개 열어도 각각의 창은 별도의 Session Storage를 갖습니다.

일반적으로 HTTP Request/Response에서 말하는 Session과는 서로 다른 개념입니다.

---

Cokies? 

• expiration date는 각 데이터 마더 설정된 기간동안으로 지정됩니다.
• 약 4KB 이하의 저장 공간을 가집니다.
• Server-Side에서 사용되는 데이터를 주로 저장합니다.
• 매번 api 요청마다 함께 전송됩니다. (header 부분에 Access-Control-Allow-Credentials를 true 설정 시)
  Access-Control-Allow-Credentials를 간단하게 셜명하지면 교차 출처 리소스 공유라는 뜻으로,
  다른 도메일으로부터 요청할 수 있도록 허용해주는 도구라고 생각하면 된다.
• HttpOnly flag를 통해서 Cookie를 client-side에서의 접근으로부터 보호할 수 있습니다.(document.cookie로 실행)

쿠키 설정법

참고자료

Local Storage vs Session Storage vs Cookies

Cookie, Session, WebStorage (localStorage,sessionStorage)