관계

1. client 는 browser 에서 server 로 자신의 정보를 가져올 것을 request 한다.

2. server 는 해당 요청(request)만으로는 누가 보낸 요청인지 알 수 없다.
   그러나, client 는 '요청'에 + '나에 대한 정보를 담은 쿠키' 를 함께 보냄으로써
   server 가 요청을 보낸 자가 누구인지 파악할 수 있도록 한다.

   문제점
   매번 요청과 함께 쿠키가 보내질 경우, 데이터 낭비가 발생한다.
   (쿠키의 용량이 클 경우, 서버에 필요하지 않은 데이터들이 더 많을 경우에는 더욱 낭비가 심하다)

3. 위의 문제점을 해결하기 위해, 로컬 스토리지 & 세션 스토리지에 데이터를 저장해둔다.
   이 경우, 두 저장소의 데이터는 처음을 제외하고은 server 로 자동 전송되지 않는다.

   참고: 서버 인증 - 2) Session / Cookie 방식 -

공통점

• key : value 형태로 데이터를 저장

차이점

1. 저장 위치

쿠키

• Client에 저장

세션

• Server 에 저장

2. 보안성

쿠키

• 보안성 ↓
  → 스니핑에 당할 우려

세션

• 보안성 ↑
  → 쿠키를 이용해 세션 아이디만 저장하고, 서버에서 처리하기 때문

3. 자동 전송

쿠키

• 요청 시, 서버로 자동 전송

로컬 저장소 & 세션 저장소 (= 웹 스토리지)

• 자동 전송의 위험성 X

4. 저장 용량

쿠키

• 小

로컬 저장소 & 세션 저장소 (= 웹 스토리지)

• 大
  (모바일 2.5MB, 데스크탑 5~10MB)

5. 데이터의 영구성

쿠키

• 만료 기한이 있는 저장소

로컬 스토리지

• 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있다. (영구성 O)
  → 따라서, 지속적으로 필요한 데이터는 로컬 스토리지에 저장
  → 예시 : 자동 로그인, 보안에 민감하지 않는 정보 저장 등...

  사용법

  /* --- 문법 --- */
  // 로컬스토리지에 저장 → (디폴트로) toString 메소드가 호출된 형태로 저장. 즉, [object 생성자]형으로 저장
  localStorage.setItem(키, 값)
  
  // 로컬스토리지에 저장 → 객체를 저장하고 싶을 경우 (2가지 방법)
  // 방법 1 : key - value 형식으로 풀어서, 여러 개를 저장
  localStorage.setItem('object', { a: 'b' });
  localStorage.getItem('object');		// [object Object]
  
  // 방법 2 : JSON.stringify으로, 한번에 한 객체를 통째로 저장 → 객체 형식 그대로 문자열로 변환
  localStorage.setItem('object', JSON.stringify({ a: 'b' }));
  JSON.parse(localStorage.getItem('object'));		// { a: 'b' }     받을 때는 JSON.parse
  
  // 조회
  localStorage.getItem(키)
  
  // key값 삭제
  localStorage.removeItem(키)
  
  // 스토리지 전체 삭제
  localStorage.clear()
  
  /* --- 예시 --- */
  localStorage.setItem('name', 'zerocho');
  localStorage.setItem('birth', 1994);
  localStorage.getItem('name');		// zerocho
  localStorage.getItem('birth');		// 1994 (문자열)
  localStorage.removeItem('birth');
  localStorage.getItem('birth');		// null (삭제됨)
  localStorage.clear();		// 전체 삭제

  • 로컬 스토리지는 window.localStorage 에 위치
  • key와 value를 순서대로 저장하면 된다.
  • 저장 가능한 값 : key값, 문자열, 불린, 숫자, null, undefined 등...
    → 모두 '문자열'로 변환된다.

세션 스토리지

• 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다.
  → 잠깐 동안 필요한 정보는 세션 스토리지에 저장
  → 예시 : 일회성 로그인 정보 등...

  사용법

  • 세션 스토리지는 window.sessionStorage 에 위치
  • 모든 메소드가 동일함 (clear, getItem, setItem, removeItem, key 등...)

6. 사용처

쿠키

• 일시적으로 필요한 가벼운 데이터 저장이 필요할 때

• 다시 보지 않음 쿠키 팝업창 , 로그인 자동 완성

로컬 스토리지

• 지속적으로 필요한 데이터 저장이 필요할 때

• 자동 로그인

세션 스토리지

• 일시적으로 필요한 데이터 저장이 필요할 때

• 일회성 로그인, 입력 폼 저장, 비로그인 장바구니

---

참고: 로컬스토리지, 세션스토리지
참고: 쿠키 vs 세션 vs 웹 스토리지(로컬 스토리지, 세션 스토리지)
참고: 쿠키, 로컬 스토리지, 세션 스토리지