[TIL]10月12日のブラウザリポジトリ

ログイン練習を行う際には、ローカルストレージにaccessTokenを保存し、accessTokenに対する権限移行の有無を判断します.
ブラウザに格納する方法は3つあります.
cookie, localStorage, sessionStorage
ブラウザリポジトリの概要
Cookie:最大1つ以上の新しいラベルページが開き、情報は消えず、各APIリクエストにはcookie追跡があります.
localStorage:新しいラベルページを開くか、すべて開くか、情報は消えません.
SessionStorage:新しいラベルページを開くか、すべて開くと、情報が消えます.
それぞれの特徴に合わせて使えばいいです.
ストレージとコンソール値の試行
サンプルコード

export default function BrowserStoragePage() {
  function onClickSaveCookie() {
    document.cookie = "aaa = 철수";
  }
  function onClickSaveLocalStorage() {
    localStorage.setItem("bbb", "영희");
  }
  function onClickSaveSessionStorage() {
    sessionStorage.setItem("ccc", "훈이");
  }
  function onClickGetCookie() {
    // console.log("myCookie", document.cookie);
    const temp = document.cookie
      .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 asdfg = sessionStorage.getItem("ccc");
    console.log("세션스토리지 : ", asdfg);
  }
  return (
    <div>
      <button onClick={onClickSaveCookie}>쿠키에 저장하기</button>
      <button onClick={onClickSaveLocalStorage}>로컬스토리지에 저장하기</button>
      <button onClick={onClickSaveSessionStorage}>
        세션스토리지에 저장하기
      </button>
      ======================================================================
      <br />
      <button onClick={onClickGetCookie}>쿠키에 있는 값 가져오기</button>
      <button onClick={onClickGetLocalStorage}>
        로컬스토리지에 있는 값 가져오기
      </button>
      <button onClick={onClickGetSessionStorage}>
        세션스토리지에 있는 값 가져오기
      </button>
    </div>
  );
}

クッキー値の保存方法
document.クッキー方式で格納し、key値とvalue値を「key=value」方式で格納します.

저장 예시
document.cookie = "aaa = 철수";

ストレージローカルストレージ、セッションストレージ
localStorageはsessionStorageと同様にsetItemを使用してリポジトリに格納されます.

저장 예시
localStorage.setItem("bbb", "영희");
sessionStorage.setItem("ccc", "훈이");

ストレージ値の使用(撮影コンソール)
クッキー値の使用(撮影コンソール)
クッキーに保存されている値を使用するには、クッキー値を加工する必要があります.

사용예시
const temp = document.cookie
      .split("; ")
      .filter((el) => el.startsWith("zzz="))[0];

このように定義して、コンソールでtempを撮影すると

値打ちが出た.
記憶方式がやや異なるため、split、fliterを用いて表現され、場合によって異なることができる.
ストレージローカルストレージ、セッションストレージ
localStorageとsessionStorageはgetItemを使用して値をロードします.

사용예시
const asdf = localStorage.getItem("bbb");
console.log("로컬스토리지 : ", asdf);
const asdfg = sessionStorage.getItem("ccc");
console.log("세션스토리지 : ", asdfg);

value値はこのように出力されます.
各リポジトリの使用状況は異なるので、ストレージと使用方法を多く使用する必要があります.