220404 웹 저장소(feat 토큰)

• 강의 여러번 보면서 만들긴 했는데
  아직 복잡해서 이해하기 위해 작성하는 글

✔ 쿠키

Cookie.js

1. 쿠키 만들기

• setCookie
  • 쿠키 만들어주는 함수
  • 인자로 key값이 될 name, vaule가 될 id, 그리고 얼마 후에 만료시킬 건지를 정해주는 exp를 받는다

• Date객체를 만들어서
  • 먼저 현재 시간을 가져오고, 그 시간에 3일 더해주는 연산을 한다 (만료일을 3일 후로 하기 위해서)
  • document.cookie = `${name} =${id}; expires =${date.toUTCString()}로 쿠키를 만든다
    • 
      이런 식으로 쿠키가 생성된다

2. 쿠키 가져오기

• getCookie
  • 쿠키를 가져오는 함수
  • value 변수에서 앞에 세미콜론을 붙이는 이유는 split 메서드를 좀더 쉽게 사용하기 위해서 붙이는 것
  • shift 메서드로 배열의 첫번째 요소만 잘라서 가지고 오면 된다

3. 쿠키 삭제하기

• deleteCooket
  • 생각보다 간단하다
  • 인자로 쿠키의 key 값을 받아서
  • date 객체를 만들어서 시간을 현재 시간보다 이전으로 만들고
  • document.cookie로 만료일을 과거로 앞당기면 삭제된다

session 저장소에 만들기

• 세션 스토리지에 저장된 데이터는 브라우저를 닫으면 제거
• 쿠키와 마찬가지로 key:value 형태의 저장소

1. 추가하기

// key는 MY_SESSION, value는 here인 세션을 만들기
sessionStorage.setItem("MY_SESSION", "here");

2. 가져오기

//키값으로 가져오기
sessionStorage.getItem("MY_SESSION");

3. 삭제하기

// 키값으로 하나만 삭제
sessionStorage.removeItem("MY_SESSION");
//싹다 삭제해버리기
sessionStorage.clear();

=> 로컬 스토리지는 메서드가 똑같다
session.()에서 localStorage.() 해주면 된다