Cookie, Session, Local Storage

브라우저 저장소의 종류에는 세가지가 있다.

• 내가만든쿠키(Cookie)
• Session Storage
• Local Storage

Cookie

1. 영구저장이 가능하다.
2. 만료시간을 지정할 수 있다. 만료시간이 정해지면 브라우저가 종료되어도 유지된다.
3. 작은 텍스트 파일로 저장되는 데이터이다.
4. 브라우저에 로컬 쿠키 지원이 꺼져 있으면 작동하지 않는다.
5. key와 value로 구성되며, string의 형태이다.
6. 사용자가 따로 요청하지 않아도 자동으로 서버에 전송한다.
7. react-cookie 훅을 이용하여 사용 가능하다.

import { useCookies } from 'react-cookie';

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

// 저장할 때
setCookke("name", "value", [options]);

// 가져올 때
getCookie("name", [options]);

// 삭제할 때
deleteCookie("name", [options]);

Session Storage

1. 브라우저 종료시 사라진다. (휘발성)
2. 같은 페이지라도 다른 탭에 있으면 따로 저장된다.
3. 하나의 탭에 여러개의 iframe이 있는 경우에는 session Storage가 공유된다.

// 저장할 때
sessionStorage.setItem("key", "value");

// 꺼내올 때
sessionStorage.getItem("key");

// 삭제할 때
sessionStorage.removeItem("key");

// 모든 키의 데이터를 삭제할 때
sessionStorage.clear();

// 저장된 한쌍의 키와 값의 갯수
sessionStorage.length;

Local Storage

1. 영구 저장이 가능하다. (비휘발성)
2. 여러 탭이나 창에서 데이터가 서로 공유된다.
3. key와 value는 문자열이여야 한다.

// 저장할 때
localStorage.setItem("key", "value");

// 꺼내올 때
localStorage.getItem("key");

// 삭제할 때
localStorage.removeItem("key");

// 모든 키의 데이터를 삭제할 때
localStorage.clear();

// 저장된 한쌍의 키와 값의 갯수
localStorage.length;