[1] 로컬스토리지, 세션스토리지, 쿠키 차이점

1. 쿠키의 단점을 보완해 HTML5에서 '웹스토리지'라는 기술 탄생.

1-1) 웹스토리지 : 로컬스토리지, 세션스토리지.

1-2) 웹스토리지는 Key와 Value 형태로 이루어짐.

1-3) 웹스토리지는 클라이언트에 대한 정보를 저장.

1-4) 웹스토리지는 로컬에만 정보를 저장, 쿠키는 서버와 로컬에 정보를 저장.

2. 로컬스토리지는 클라이언트에 대한 정보를 영구적으로 저장

ex) 자동 로그인 저장

3. 세션스토리지는 세션 종료 시(브라우저 닫을 경우) 클라이언트에 대한 정보 삭제
   ex) 입력 폼 정보 저장

3-1) 로컬&세션스토리지 장점1 : 서버에 불필요하게 데이터를 저장하지 않는다.

3-2) 로컬&세션스토리지 장점2 : 용량이 크다. (약 5Mb, 브라우저마다 차이 존재)

3-3) 로컬&세션스토리지 단점 : HTML5를 지원하지 않는 브라우저의 경우 사용 불가

4. 쿠키는 만료 기한이 있는 Key, Value 형태의 저장소
   4-1) 쿠키 장점 : 대부분의 브라우저가 지원

4-2) 쿠키 단점1 : 매 HTTP요청마다 포함되어 api호출로 서버에 부담.

4-3) 쿠키 단점2 : 쿠키의 용량이 작음 (약 4Kb)

4-4) 쿠키 단점3 : 암호화 존재 x -> 사용자 정보 도난 위험

[2] 각 예 - 어떤 유형의 데이터를 어디에 저장하면 좋을까?

자동 로그인 -> 로컬스토리지

입력 폼 정보 -> 세션스토리지

비로그인 장바구니 -> 세션스토리지

다시 보지 않음 팝업 창 -> 쿠키

자바스크립트 객체 예시

let object = {

"A" : 1,

"B" : 2,

"name" : "wecode",

"Key" : "Value"
}

ex)
1. 로컬 스토리지
localStorage.A = 1 (Key == A, Value = 1)

localStorage.setItem("A", 1)

2. 세션 스토리지
   sessionStorage.A = 1 (Key == A, Value = 1)

sessionStorage.setItem("A", 1)

3. 쿠키
   setCookie("A", 1, 7) (Key == A, Value == 1, 유효기간 == 7초)