[JS] 쿠키 / 웹 스토리지(로컬 / 세션 스토리지) 비교하며 이해하기

해당 글에서는 쿠키와 웹 스토리지(로컬, 세션)에 대해서 다시 한번 정리하며 각각을 비교하며 각각의 특징과 사용처에 대해 이해를 돕기 위해 작성한 글입니다.

 

 

💡 해당 글을 읽기 전에 이전에 작성한 ‘쿠키(Cookie)'와 ‘웹 스토리지(Web Stroage)' 관련 글을 이해하고 오신다면 더 쉽게 이해가 되실 것입니다. 하단에 이전에 작성한 글입니다.

[JS] 쿠키(Cookie) 이해하기

[JS] 웹 스토리지(로컬 스토리지 / 세션 스토리지) 이해하기

 

1) 쿠키(Cookie)

---

💡 웹 브라우저 상에 작은 ‘텍스트 파일’로 저장이 되는 만료 기간이 존재하는 저장소를 의미합니다.

 

• HTTP 프로토콜의 특성인 비연결 지향(connectionless)과 무상태(Stateless)에 문제점이 있기에 '쿠키'를 사용하게 되었습니다. 이는 결론적으로는 로그인이나 브라우저 입력값이 요청마다 초기화되는 문제입니다.
• ‘Cookie-name : Cookie-value’ 형태의 저장소 구조를 갖습니다.
• Cookie-value는 문자열 형태만 가지며, 최대 4KB의 제한 용량을 가지고 있습니다.
• 쿠키는 특정 시간 초과 후에 데이터를 무효화하는 것을 권장하기에 만료기간이 존재합니다.
• 쿠키는 클라이언트가 서버에 접속한 방문 정보를 클라이언트에 저장하기에 매번 서버 전송이 되기에 자원 소모가 발생합니다.
• 쿠키는 오랜시간 동안 유지될 수 있고, 자바스크립트를 이용하여 쿠키에 접근할 수 있기에 쿠키에 민감한 정보를 담기에 CSRF 공격에 취약합니다.
• 쿠키의 사용처
  • 로그인 화면에서 ‘아이디 자동완성’ 기능
  • 팝업 화면에서 ‘오늘 하루 보지 않기' 기능
  • 미 로그인 상태에서 ‘장바구니 담기’ 기능

 

[더 알아보기]
💡 비연결지향(connectionless)
- 클라이언트에서 서버로 Request를 보내고 서버에서 이에 대한 Response를 보내면 접속이 종료됩니다.

💡 무상태(Stateless)
- HTTP 요청을 수행하였을 때, 상태 정보를 가지고 있지 않습니다.

💡 사이트 간 요청 위조 - CSRF(Cross Site Request Forgery) 보안 취약점
- 비 정상적으로 사용자의 의도와 무관하게 다른 사이트에 HTTP 요청 보내는 것을 CSRF 공격이라 합니다.

 

2) 로컬 스토리지(Local Storage)

---

💡  만료기간이 존재하지 않으며 페이지를 변경하거나 브라우저를 닫아도 반영구적으로 유지되는 저장소 값을 의미합니다.

 

• ‘Key : Value’ 형태의 저장소 구조를 갖습니다.
• ‘Value’는 문자열 형태만 가지며, 브라우저마다 상이하지만 최대 모바일은 2.5KB, 데스크톱은 약 5 ~ 10KB의 제한 용량을 가지고 있습니다.
• 로컬 스토리지는 반영구적으로 브라우저를 종료하거나 OS를 종료해도 유지되며, 강제적으로 삭제나 초기화를 할 때만 사라집니다.
• 로컬 스토리지는 서버에 전송되지 않고 클라이언트 내에서만 유효합니다.(상대적인 자원 소모가 적다)
• 로컬 스토리지는 동일한 도메인 내에서만 유효하며, 다른 도메인에서는 유효하지 않습니다.
• 로컬 스토리지의 사용처
  • 로그인 화면에서 ‘자동 로그인' 기능

 

3) 세션 스토리지(Session Storage)

---

💡 브라우저의 탭 안에 유효한 저장소이며, 브라우저를 닫는 경우 소멸이 되는 저장소입니다.

 

• ‘Key : Value’ 형태의 저장소 구조를 갖습니다.
• ‘Value’는 문자열 형태만 가지며, 브라우저마다 상이하지만 최대 모바일은 2.5KB, 데스크톱은 약 5 ~ 10KB의 제한 용량을 가지고 있습니다.
• 세션 스토리지는 브라우저를 종료하거나 OS를 종료하면 사라지고 새로고침이나 브라우저 탭이 유지될 때에만 해당 저장소가 유지됩니다.
• 세션 스토리지는 서버에 전송되지 않고 클라이언트 내에서만 유효합니다(상대적인 자원 소모가 적다)
• 세션 스토리지는 동일한 도메인과 탭에서만 유효하며, 다른 도메인 혹은 브라우저 내에서는 유효하지 않습니다.
• 세션 스토리지의 사용처
  • 임시로 유지되는 입력 폼 정보
  • 일회성 로그인

 

4) 쿠키 / 웹 스토리지(로컬/세션) 비교

---

분류	쿠키(Cookie)	로컬 스토리지(Local Stroage)	세션 스토리지(Session Storage)
구조	‘Cookie-name : Cookie-value’	‘Key : Value’	‘Key : Value’
최대 크기	4KB	모바일 : 2.5KB, 데스크 탑: 5 ~ 10KB	모바일 : 2.5KB, 데스크 탑: 5 ~ 10KB
유효 시점	- 지정한 만료기간까지 유효합니다	- 브라우저 및 OS를 종료하더라도 유효합니다.	- 새로고침이나 브라우저 탭이 유지될때까지만 유효합니다.
소멸 시점	- 지정한 만료기간이 지나면 소멸됩니다.	- 강제적으로 삭제 및 초기화를 할 때 소멸됩니다.	- 탭을 닫거나 브라우저를 닫으며 OS를 종료 시 소멸됩니다.
서버의 전송여부	O (요청 마다 방문정보를 저장함)	X	X
장점	- 대부분의 브라우저에서 제공한다. - 유저의 웹 사이트 방문내역을 추적하여 쿠키 제공자의 접속 패턴을 파악하여 유저와 관련성이 높은 마케팅 정보를 제공한다.	- 서버로 전송되지 않기에 상대적 자원소모가 적다 - 필요한 경우에만 꺼내서 쓰기 때문에 자동 전송이 되지 않는다	- 서버로 전송되지 않기에 상대적 자원소모가 적다 - 필요한 경우에만 꺼내서 쓰기 때문에 자동 전송이 되지 않는다
단점	- 매번 서버로 전송되기에 상대적 자원소모가 있다 - 쿠키에 접근이 가능하고 조작하여 CSRF 보안에 취약하다.	- HTML5를 지원하지 않는 브라우저에서는 사용이 불가능하다	- HTML5를 지원하지 않는 브라우저에서는 사용이 불가능하다
사용처	- 로그인 화면에서 ‘아이디 자동완성’ 기능 - 팝업 화면에서 ‘오늘 하루 보지 않기' 기능 - 미 로그인 상태에서 ‘장바구니 담기’ 기능	- 로그인 화면에서 ‘자동 로그인' 기능	- 임시로 유지되는 입력 폼 정보 - 새로고침 시 데이터 유지 정보 - 일회성 로그인 정보

 

 

5) 오늘의 결론

---

이번에 비교글까지 해서 쿠키와 웹 스토리지에 대해서 이해하였습니다. 
각각에 따른 쓰임새가 있는 만큼 목적에 따라 잘 선택해서 사용하시면 좋을 것 같습니다.

 

 

 

오늘도 감사합니다😀