브라우저 저장소

쿠키Cookie: 로컬스토리지랑 비슷하지만 껐다 켜도 살아있다. 백엔드에 쿠키에 있는 값이 자동으로 딸려 들어간다. request.header에 추가되어 백엔드로 날라감.
로컬 스토리지LocalStorage: 껐다 켜도 살아있다.
세션 스토리지SessionStorage: 껐다 키면 사라진다.

• 각 브라우저에 데이터를 넣어보자

export default function BrowserStoragePage() {
  function onClickSetCookie() {
    document.cookie = "aaa=철수";
    // key, value 사이를 =으로 구분함
  }

  function onClickSetLocalStorage() {
    localStorage.setItem("bbb", "영희");
  }
  // 뒤에는 키값, value값을 넣어주면 됨
  function onClickSetSessionStorage() {
    sessionStorage.setItem("ccc", "훈이");
  }

  function onClickGetCookie() {}

  function onClickGetLocalStorage() {}

  function onClickGetSessionStorage() {}

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

• 브라우저에 있는 데이터들을 가져오자

export default function BrowserStoragePage() {
  function onClickSetCookie() {
    document.cookie = "aaa=철수";
    // key, value 사이를 =으로 구분함
  }

  function onClickSetLocalStorage() {
    localStorage.setItem("bbb", "영희");
  }
  // 뒤에는 키값, value값을 넣어주면 됨
  function onClickSetSessionStorage() {
    sessionStorage.setItem("ccc", "훈이");
  }

  function onClickGetCookie() {
    const mycookie = document.cookie;
    console.log(mycookie);
    // 욜.. 딱히 키값을 안쓰나보네
  }

  function onClickGetLocalStorage() {
    const bbb = localStorage.getItem("bbb");
    console.log(bbb);
    // localStorage.getItem("키값") 을 bbb에 담아서 잘 나왔는지 찍어보는거임
  }

  function onClickGetSessionStorage() {
    const ccc = localStorage.getItem("ccc");
    console.log(ccc);
  }

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

그런데 쿠키는 뭔가 다르게 가져오고 있다..

여러개를 넣었더니 이런식으로 데이터를 불러오기에 나눠줄 필요가 있다.

위와 같은 콘솔을 참고하여 vscode를 수정해보자

  function onClickGetCookie() {
    const zzz = document.cookie
      .split("; ")
      .filter((el) => el.startsWith("zzz="))[0]; // "zzz="짱구"
    console.log(zzz.split("=")[1]); // ["zzz", "짱구"] 에서 1번째
  }

수정된 getCookie...
아래처럼 짱구가 깔끔하게 나온다!