브라우저 저장소(스토리지)

브라우저에는 변수와 같이 저장할 수 있는 공간이 따로 존재한다. 변수에 저장한 데이터는 새로고침하면 사라지므로 브라우저의 공간에 저장한다.

Cookie

• Cookie에 정보를 담아두면 브라우저에서 서버로 저장된 데이터가 Backend-API 요청시에 자동으로 정보가 따라간다. 또한 서버에서 브라우저로 쿠키에 정보를 저장해서 보낼 수 있다. 로그인 토큰 등 쿠키에 넣어서 전달 할 수 있다.

• 각각의 API마다 주소가 다른데, 쿠키에 이 주소를 가르키는 키가 존재한다.
  

  refreshToken

  refreshToken은 secur httpOnly 쿠키이다.
  accessToken이 만료되었을 때, refreshToken으로 accessToken을 재발급 받는다. refreshToken을 서버에서 쿠키에 저장해서 브라우저로 보낸다. 브라우저가 refreshToken을 받아서 저장한다.
  어떤 API를 요청해도 항상 refreshToken이 저장된 상태로 따라다닌다.

LocalStorage

• 브라우저를 종료하고 다시 켜도 저장한 정보들이 사라지지 않아 영구적으로 보관이 가능하다.

• 서버에 정보를 보내는 도구는 아니다.

SessionStorage

• 데이터를 브라우저에 저장하고, 윈도우나 브라우저를 닫으면 기존에 저장한 정보가 사라진다.

• 서버에 정보를 보내는 도구가 아니다.

export default function BrowerStoragePratice() {
  // 저장하기
  function onClickSaveCookie() {
    document.cookie = "aaa=철수";
  }

  function onClickSaveLocalStorage() {
    localStorage.setItem("bbb", "영희");
  }

  function onClickSaveSessionStorage() {
    sessionStorage.setItem("ccc", "훈이");
  }

  // ================================================================

  // 가져오기
  function onClickGetCookie() {
    // console.log("쿠키:", document.cookie);

    // const email = "aaa@aaa.com"
    // email.split("; ")

    const temp = document.cookie // temp = "aaa=철수"
      .split("; ")
      .filter((el) => el.startsWith("zzz="))[0];

    console.log(temp.split("=")[1]);
  }

  function onClickGetLocalStorage() {
    const asdf = localStorage.getItem("bbb");
    console.log("로컬스토리지:", asdf);
  }

  function onClickGetSessionStorage() {
    const qwer = sessionStorage.getItem("ccc");
    console.log("세션스토리지:", qwer);
  }

  return (
    <>
      <button onClick={onClickSaveCookie}>쿠키에 저장하기</button>
      <button onClick={onClickSaveLocalStorage}>로컬스토리지에 저장하기</button>
      <button onClick={onClickSaveSessionStorage}>
        세션스토리지에 저장하기
      </button>
      =====================================================================
      <button onClick={onClickGetCookie}>쿠키에 있는 값 가져오기</button>
      <button onClick={onClickGetLocalStorage}>
        로컬스토리지에 있는 값 가져오기
      </button>
      <button onClick={onClickGetSessionStorage}>
        세션스토리지에 있는 값 가져오기
      </button>
    </>
  );
}