[TIL] 10월 12일 브라우저장소

로그인관련 실습시 accessToken을 로컬스토리지에 저장해 accessToken 여부를 판단해 권한분기 작업을 진행했다.

브라우저에 저장하는 방법의 경우 3가지가 있다.

cookie, localStorage, sessionStorage

브라우저 저장소 간단요약
cookie : 껏다 키거나 새탭을 열어도 정보가 안사라지고 보내는 api 요청마다 쿠키가 따라다닐수 있음
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>
  );
}

cookie 값 저장하는 방법
document.cookie 방식으로 저장하며 key, value 값을 "key === value" 방식으로 저장한다.

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

localStorage, sessionStorage 저장하는 방법
localStorage와 sessionStorage 사용방법은 동일하며 setItem을 사용해서 저장소에 저장한다.

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

스토리지값 사용해보기(콘솔찍기)

cookie값 사용해보기(콘솔찍기)
위에서 cookie에 저장한 값을 사용하려면 cookie값을 가공해줘야 한다.

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

이렇게 정의후 temp를 콘솔로 찍어보면

value 값이 나온다.
저장되는 방식이 조금 다르기에 split, fliter 를 사용해서 표현했으며 상황에 따라서 다르게 표현할수 있다.

localStorage, sessionStorage 저장하는 방법
localStorage, sessionStorage 모두 getItem을 사용해서 값을 불러온다.

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

value 값이 이렇게 출력된다.

각각의 저장소마다 활용되는 경우가 다르니 저장되는 방식, 사용방식에 대하여 많이 사용해봐야 겠다.