쿠키 vs 세션저장소 vs 로컬저장소

 

사람의 뇌는 램이다 왜냐면 휘발성이기 때문이다... #그래도 #다시 #가보자고

 

---

✅ 쿠키🍪

• 웹사이트에 의해 유저의 정보를 저장하는 것
• 서버와 데이터를 공유하는 용도로 사용됨
• 데이터의 유효 기간 지정이 가능함(ex : 1시간 뒤, 하루 뒤 등등)
• 대부분의 브라우저가 지원을 함
• 저장 사이즈가 매우매우 작음(4kb)
• 서버에 매번 HTTP요청을 해서 데이터 전달 낭비가 발생함
  근데 쿠키는 애초에 서버-클라이언트 간의 지속적인 데이터 교환을 위해 만들어진거라.. 매번 전달 할 수 밖에..
• 주로 팝업창 다시 보지 않음 기능에 많이 사용됨

✅ 세션 스토리지 (Session Storage, 임시저장소)

• 만료기간이 있어서 브라우저를 종료하거나, 새로 창을 열면 초기화 됨
• 자동 임시 저장 용도로 쓰임
• 주로 입력폼 정보 저장, 비로그인 장바구니, 글쓰기 도중 내용 복구하기 등에 많이 쓰임
• 나머지는 로컬 스토리지와 동일

✅ 로컬 스토리지 (Local Storage, 영구저장소)

• key:value를 String타입으로 저장
  (값으로 문자열, 불린, 숫자, null, undefined 등을 저장할 수 있으나 모두 문자열로 변환 됨)
• 최대 저장 용량은 5~10MB로, 간단한 텍스트를 담을 수 있음
• 사용자가 삭제하지 않는 한, 만료기간이 없이 저장이 가능하여 자동로그인에 주로 사용됨

 

✅ 쿠키 vs 스토리지

쿠키

• 대부분의 브라우저가 지원
• 매 HTTP 요청마다 암호화 없이! 전달되기 때문에 보안이 약함

스토리지

• 브라우저나 디바이스 등 환경을 많이 탐
  → 꼭 필요한 정보는 서버에서 관리를 하고, 스토리지는 추가적으로 있으면 좋은 기능 정도로 활용하는게 바람직.
• 서버에 매번 전달 되는 것이 아니어서 자원 낭비가 적음

 

 

👀참고 (감사합니다)

https://iancoding.tistory.com/171

브라우저 저장소 (쿠키, 로컬 스토리지, 세션 스토리지)

 

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

(HTML&DOM) 로컬스토리지, 세션스토리지 - 그리고 쿠키