1. 쿠키(Cookie)
쿠키란 웹사이트에 의해 유저의 정보를 저장하는 것이다. 서버와 데이터를 공유하는 용도로 사용되며 데이터의 유효기간 지정이 가능하다. (ex: 1시간 뒤, 하루 뒤) 장점으로는 대부분의 브라우저가 지원을 한다는 점이지만 단점으로는 4KB 데이터 저장 제한으로 사이즈가 매우작고, 서버에 매 HTTP 요청으로 데이터 전달 낭비가 발생한다는 점이다. 또한 문자열 형태만 저장이 가능하다. 팝업창 다시 보지 않음 기능에 사용된다.
// 쿠키 생성
// ;을 기준으로 document.cookie의 값을 분리하면 원하는 쿠키를 찾을 수 있다.
// Name이 user고, Value가 John인 쿠키 추가
// 그리고 속성값으로 path와 expires를 설정해서 추가
// 이 속성값은 쿠키 스트링에 저장되지는 않고 속성 정보에 저장된다.
document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"
// 저장된 쿠키 불러오기
const x = document.cookie; // cookie1=value1; cookie2=value2;...2. 로컬 스토리지(Local Storage)
로컬 스토리지는 가볍지만 기능이 많지 않고 단순히 key(키):value(값)을 JavaScript 객체 타입으로 저장하는 기능만 있다. 로컬 스토리지에 저장된 데이터는 직접 제거하기 전까지 영구적으로 존재한다. 최대 저장용량은 5~10MB로 제한되어 있지만 만료기간 없이 저장이 가능하여 자동 로그인, 다크 모드에 사용된다.
localStorage.setItem('age', 30);
localStorage.getItem('age'); // '30' (문자열)
localStorage.removeItem('age'); // null
localStorage.null
// 객체를 저장할 때
localStorage.setItem('object', JSON.stringfy({a : 'b'}));
JSON.parse(localStorage.getItem('object')); // {a : 'b'}3. 세션 스토리지(Session Storage)
세션 스토리지는 로컬 스토리지와 달리 만료기간이 있어 브라우저를 종료하거나 새 탭을 열 때 데이터가 초기화가 된다. (같은 탭에서 새로고침 시에는 데이터가 유지됨) 즉, 로컬 스토리지와 세션 스토리지의 차이는 바로 영구성이다. 자동 임시 저장 용도로 쓰이는데 예를 들어 입력폼 정보 저장, 비로그인 장바구니, 글쓰기 도중 내용 복구하기가 있다. 사용법은 위의 로컬 스토리지와 동일하다.
4. 쿠키 vs 스토리지
쿠키는 대부분의 브라우저가 지원하지만 스토리지는 브라우저와 디바이스 등의 환경을 많이 타기 때문에 제대로 작동하지 않을 수도 있다. 그래서 꼭 필요한 정보는 서버에서 관리를 하고 스토리지는 있으면 좋은 기능을 구현할 때 쓰면 좋다. 쿠키의 용량은 4KB로 매우 작기 때문에 표준 한페이지당 5MB로 권장되는 스토리지를 사용하면 key, value 값만 저장하기에 충분히 큰 사이즈이다. 그리고 보안적인 측면에서 쿠키는 매 HTTP요청마다 암호화 없이 전달되기 때문에 도청당하면 정보를 쉽게 도난당할 수 있고 스토리지는 HTTP요청 때 마다 서버에 전달되지 않기 때문에 자원낭비가 적고 표준을 지켜서 설계하면 보안도 강화된다.
Reference
👉 LocalStorage / SessionStorage (vs 쿠키와 비교 정리)
👉 브라우저 저장소
👉 자바스크립트로 쿠키(Cookie) 다루기
