로컬 스토리지 vs 세션 스토리지

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

	로컬 스토리지	세션 스토리지
데이터 영구	O (사용자가 지우지 않는 한)	X (윈도우, 탭 닫을시 내용 제거)
사용방법	자동 로그인	일회성 로그인
주의사항	비밀번호와 같은 중요 정보는 절대 저장 X	비밀번호와 같은 중요 정보는 절대 저장 X

• 웹스토리지는 로컬 스토리지와 세션 스토리지로 구분됨
• 웹스토리지는 Key와 Value 형태로 이루어짐
• 웹스토리지는 클라이언트에 대한 정보를 저장.
• 웹스토리지는 로컬에만 정보를 저장, 쿠키는 서버와 로컬에 정보를 저장
• 로컬스토리지는 클라이언트에 대한 정보를 영구적으로 저장
• 세션스토리지는 세션 종료 시(브라우저를 닫을 경우) 클라이언트에 대한 정보 삭제(일회성)

로컬 & 세션 스토리지의 장점

1. 서버에 불필요하게 데이터를 저장하지 않는다.
2. 용량이 크다. (약 5MB, 브라우저마다 차이 존재)

로컬 & 세션 스토리지의 단점

• HTML5를 지원하지 않는 브라우저의 경우 사용 불가

[실습] 웹스토리지(로컬 스토리지)

import React, { useState, useEffect } from 'react';
function Counter() {
 	const [count, setCount] = useState(() => JSON.parse(window.localStorage.getItem("count") || 0);
	useEffect(() => {
      window.localStorage.setItem("count", JSON.stringify(count));
    }, [count]);
  	return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

useEffect() 함수는 count 상태값이 변경될 때마다 호출, 웹스토리지는 오직 문자형 데이터만 지원하기 때문에 데이터를 쓰기전에 JSON.stringify()함수로 직렬화하고, 읽기 전에 JSON.parse()함수로 역직렬화 합니다.