[JavaScript]로컬스토리지, 세션스토리지, 쿠키 정리

🙋‍♂️ 로컬 스토리지, 세션 스토리지, 쿠키 차이점

안녕하세요 TriplexLab 입니다.
오늘은 로컬 스토리지, 세션 스토리지, 쿠키 차이점에 관해서 하나씩 살펴보도록 하겠습니다.

🍪 Cookie

📌 쿠키는 만료 기한이 있는 Key, Value 형태의 저장소

function setCookie(name, value, day) {
  var date = new Date(); 
  date.setTime(date.getTime() + day * 60 * 60 * 24 * 1000); 
  document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/'; 
};

function getCookie(name) { 
  var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)'); 
  return value? value[2] : null; 
};

setCookie(key, value, time) 
getCookie(key)

장점:
- 대부분의 브라우저가 지원

단점 :
- 매 HTTP 요청마다 포함되어 api호출로 서버에 부담. 
- 쿠키의 용량이 작음 (약 4KB)
- 암호화 존재 x -> 사용자 정보 도난 위험

👏 localStorage

📌 storage의 특징 문자열 데이터만 저장할수 있다.
📌 로컬 스토리지는 브라우저 창을 닫더라도 데이터 유지된다.
(즉 로그아웃을 하더라도 데어터 유지된다.)

localStorage.setItem('key', JSON.stringfy(value)) // 저장
JSON.parse(localStorage.getItem('key')) // 조회
localStorage.removeItem('key') // 해당 키가 삭제
localStorage.clear() // 전체삭제

장점: 
- 서버에 불필요한 데이터를 저장해달라고 요청하지 않아도 된다.
- 용량이 크다 (5MB, 브라우저마다 차이 있음)

단점 :
- HTML5를 지원하지 않는 브라우저의 경우 사용 불가

👏 sessionStorage

📌 storage의 특징 문자열 데이터만 저장할수 있다.
📌 세션 스토리지는 브라우저 창을 닫는 순간 영구적으로 데이터 삭제

sessionStorage.setItem('key', JSON.stringfy(value)) // 저장
JSON.parse(sessionStorage.getItem('key')) // 조회
sessionStorage.removeItem('key') // 해당 키가 삭제
sessionStorage.clear() // 전체삭제

장점: 
- 서버에 불필요한 데이터를 저장해달라고 요청하지 않아도 된다.
- 용량이 크다 (5MB, 브라우저마다 차이 있음)

단점 :
- HTML5를 지원하지 않는 브라우저의 경우 사용 불가

📔 어떤 유형의 데이터를 어디에 저장하면 좋을까?

• 입력 폼 정보 👉 세션 스토리지 
• 비로그인 장바구니 👉 세션 스토리지 
• 상세페이지에서 목록 페이지로 이동할 때 스크롤 위치 값 👉 세션 스토리지
• 자동 로그인 기능 👉 로컬 스토리지 
• 다크모드와 라이트모드 기능 👉 로컬 스토리지
• 다시 보지 않음 팝업 창 기능 👉 쿠키