✅ 요약하기

• 쿠키는 웹 브라우저상에 작은 텍스트 파일로 저장되는 만료기간이 있는 저장소입니다.
• 세션 스토리지는 브라우저의 탭 안에 유효한 저장소이며, 브라우저를 닫는 경우 소멸이 되는 저장소입니다.
• 로컬 스토리지는 만료기간이 존재하지 않고 페이지를 변경하거나 브라주저를 닫아도 반영구적으로 저장되는 저장소입니다.

이 세 가지를 비교할 때 기준은 구조, 최대 크기, 유효 시점, 소멸 시점, 서버 전송 여부, 장단점, 실제 예시 등을 생각하면 좋습니다.

✅ 알아보기

쿠키

• 쿠키는 cookie-name = cookie-value 형태의 구조를 가지고 있습니다.
• 쿠키는 하나의 문자열 내 속성을 세미 콜론을 기준으로 구분을 짓습니다.
• 쿠키는 텍스트 파일의 형태로 4KB의 용량 제한을 가지고 있습니다.
• 쿠키는 개인정보가 포함된 보안정보를 사용하면 안됩니다.
• 쿠키는 특정 시간 초과 후에 쿠키 데이터를 무효화시키는 게 중요합니다.

저는 주로 리액트 쿠키를 자주 사용하는 편입니다.

function App() {
  const [cookies, setCookie, removeCookie] = useCookies(['cookie-name']);

  function onChange(newName) {
    setCookie('name', newName);
  }

  return (
    <div>
      <NameForm name={cookies.name} onChange={onChange} />
      {cookies.name && <h1>Hello {cookies.name}!</h1>}
    </div>
  );
}

https://www.npmjs.com/package/react-cookie

스토리지

세션 스토리지

• 브라우저 탭 안에서만 유효한 저장소입니다.
• 같은 도메인이라도 세션이 다르면 접근이 불가능합니다.

const fn_controlSessionStorage = () => {
    // 구조 분해 할당(Destructuring assignment)을 이용한 메소드 호출
    const { setItem, getItem, removeItem, clear, length, key } = sessionStorage;
 
    // 세션 스토리지 저장1 - 키(key)와 값(value)을 기반으로 저장합니다.(값을 문자열로 저장)
    sessionStorage.setItem('userId', 'adjh54');
 
    // 세션 스토리지 저장2 - 키(key)와 값(value)을 기반으로 저장합니다.(값을 Object로 저장)
    const userInfoObj = {
        userId: 'adjh54',
        userAge: 30,
    };
    sessionStorage.setItem('userInfoObj', JSON.stringify(userInfoObj));
 
    // 세션 스토리지 저장3 - 키(key)와 값(value)을 기반으로 저장합니다.(값을 Array로 저장)
    const userAddr = ['Seoul', 'Dongjak-gu'];
    sessionStorage.setItem('userInfoArr', JSON.stringify(userAddr));
 
    // 세션 스토리지 불러오기1 - 키(key) 값을 기반으로 값(value)을 불러옵니다.(String -> String)
    sessionStorage.getItem('userId');
 
    // 세션 스토리지 불러오기2 - 키(key) 값을 기반으로 값(value)을 불러옵니다.(String -> Object)
    JSON.parse(sessionStorage.getItem('userInfoObj')!);
 
    // 세션 스토리지 불러오기3 - 키(key) 값을 기반으로 값(value)을 불러옵니다.(String -> Array)
    JSON.parse(sessionStorage.getItem('userInfoObj')!);
 
    // 세션 스토리지 불러오기 - 인덱스 값을 기반으로 값(value)을 불러옵니다.
    sessionStorage.key(0);
 
    // 세션 스토리지 삭제 - 키(key) 값을 기반으로 해당 로컬 스토리지를 제거합니다.
    sessionStorage.removeItem('userId');
 
    // 세션 스토리지 초기화
    sessionStorage.clear();
 
    // 세션 스토리지의 개수를 반환 받는다.
    sessionStorage.length;
};

로컬 스토리지

• 로컬 스토리지를 직접 초기화하거나 제거하지 않는다면 만료기간이 존재하지 않습니다.
• 페이지를 변경하거나 브라우저를 닫더라도 값을 유지됩니다.
• 도메인 다른 경우에는 로컬 스토리지 공유가 불가능합니다.

const controlLocalStorage = () => {
    // 구조 분해 할당(Destructuring assignment)을 이용한 메소드 호출
    const { setItem, getItem, removeItem, clear, length, key } = localStorage;
 
    // 로컬 스토리지 저장1 - 키(key)와 값(value)을 기반으로 저장합니다.(값을 문자열로 저장)
    localStorage.setItem('userId', 'adjh54');
 
    // 로컬 스토리지 저장2 - 키(key)와 값(value)을 기반으로 저장합니다.(값을 Object로 저장)
    const userInfoObj = {
        userId: 'adjh54',
        userAge: 30,
    };
    localStorage.setItem('userInfoObj', JSON.stringify(userInfoObj));
 
    // 로컬 스토리지 저장3 - 키(key)와 값(value)을 기반으로 저장합니다.(값을 Array로 저장)
    const userAddr = ['Seoul', 'Dongjak-gu'];
    localStorage.setItem('userInfoArr', JSON.stringify(userAddr));
 
    // 로컬 스토리지 불러오기1 - 키(key) 값을 기반으로 값(value)을 불러옵니다.(String -> String)
    localStorage.getItem('userId');
 
    // 로컬 스토리지 불러오기2 - 키(key) 값을 기반으로 값(value)을 불러옵니다.(String -> Object)
    JSON.parse(localStorage.getItem('userInfoObj')!);
 
    // 로컬 스토리지 불러오기3 - 키(key) 값을 기반으로 값(value)을 불러옵니다.(String -> Array)
    JSON.parse(localStorage.getItem('userInfoObj')!);
 
    // 로컬 스토리지 불러오기 - 인덱스 값을 기반으로 값(value)을 불러옵니다.
    localStorage.key(0);
 
    // 로컬 스토리지 삭제 - 키(key) 값을 기반으로 해당 로컬 스토리지를 제거합니다.
    localStorage.removeItem('userId');
 
    // 로컬 스토리지 초기화
    localStorage.clear();
 
    // 로컬 스토리지에 저장된 데이터 개수를 반환 받습니다.
    localStorage.length;
};

✅ 비교하기

분류기준	쿠키	세션 스토리지	로컬 스토리지
구조	‘Cookie-name : Cookie-value’	‘Key : Value’	‘Key : Value’
최대 크기	4KB	2.5KB (Mobile) / 5 ~ 10KB (Desktop)	2.5KB (Mobile) / 5 ~ 10KB (Desktop)
유효 시점	지정한 만료 기간	브라우저 탭이 유지될 때까지	브라우저나 OS를 종료해도 유효
소멸 시점	만료 기간이 지나면	탭, 브라우저, OS 종료 시	강제로 삭제
서버 전송 여부	O	X	X
장점	방문내역 추적해서 유저와 밀접한 마케팅 정보 제공	서버 전송 X, 자원 소모 적음	서버 전송 X, 자원 소모 적음
단점	서버 전송 O, 자원 소모 있음, 보안 취약	HTML5를 지원하지 않는 브라우저에서 사용 불가	HTML5를 지원하지 않는 브라우저에서 사용 불가
사용처	아이디 자동 완성, 팝업 그만 보기, 장바구니	입력 폼, 데이터 유지, 일회성 로그인	자동 로그인