2주차 - 웹 저장소(feat. 토큰)

Http는 1번 요청을 하고 응답을 받으면 연결이 해제됩니다!

즉, 우리가 access_token을 클라이언트 어딘가에 저장을 해두어야한단 이야기예요!

그럼 이 토큰을 어디에 저장하면 좋을 지, 클라이언트에서 쓸 수 있는 저장소를 알아봅시다. 😉

 

- 클라이언트 저장소

클라이언트 저장소 확인하기

개발자도구 → Application 탭 → 좌측 Storage 확인!

 

- 쿠키

: 클라이언트 로컬에 저장되는 key:value 형태의 저장소입니다. 약 4KB 정도 저장 할 수 있습니다.

 

1) 쿠키 만들기

: 브라우저에서 개발자 도구를 열고 해볼껀데, 이 때 꼭, 어떤 사이트에 접속한 후에 쿠키를 사용 할 수 있습니다.

// key는 MY_COOKIE, value는 here, 
document.cookie = "MY_COOKIE=here;";

+ 쿠키 만료일 설정하는 방법

let date = new Date('2022-10-05');

let data_str = date.toUTCString();

document.cookie = "MY_COOKIE=here; expires="+data_str

 

2) 쿠키 가져오기

console.log(document.cookie);

 

3) 쿠키 삭제하기

: 쿠키를 삭제 할 때는 만료일을 이전으로 돌려서 지우는 방법을 많이 사용합니다.

document.cookie = "MY_COOKIE=here; expires=new Date('2020-12-12').toUTCString()";

 

- 세션 스토리지

: HTML5에서 추가된 저장소입니다. 쿠키와 마찬가지고 key:value 형태의 저장소입니다.

 

1) 세션 스토리지에 저장된 데이터는 브라우저를 닫으면 제거 됩니다.

-> 자동 로그인이나 장바구니 같은 다음에 브라우저를 열었을 때도 유지 해야 하는 데이터는 넣기 어렵습니다.

 

2) 추가하기

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

 

3) 가져오기

// key값으로 쉽게 가져올 수 있어요 :) 
sessionStorage.getItem("MY_SESSION");

 

4) 삭제하기

// 하나만 삭제하고 싶다면, 이렇게 키를 통해 삭제합니다.
sessionStorage.removeItem("MY_SESSION");

// 몽땅 지우고 싶을 땐 clear()를 쓰면 됩니다. :) 
sessionStorage.clear();

 

- 로컬 스토리지

: HTML5에서 추가된 저장소입니다. 쿠키와 마찬가지고 key:value 형태의 저장소입니다.

 

1) 로컬 스토리지는 따로 지워주지 않으면 계속 브라우저에 남아 있습니다.

-> 유저의 아이디, 비밀번호 같은 중요한 정보를 넣어두면 위험합니다.

 

2) 추가하기

// key는 MY_LOCAL, value는 here인 데이터를 저장해요.
localStorage.setItem("MY_LOCAL", "here");

 

3) 가져오기

// key값으로 쉽게 가져올 수 있어요 :) 
localStorage.getItem("MY_LOCAL");

 

4) 삭제하기

// 하나만 삭제하고 싶다면, 이렇게 키를 통해 삭제합니다.
localStorage.removeItem("MY_LOCAL");

// 몽땅 지우고 싶을 땐 clear()를 쓰면 됩니다. :) 
localStorage.clear();

 

- 토큰은 어디에 저장 해야 할까??

예전에는 토큰을 저장할만한 곳이 쿠키 밖에 없었어요. 😢

HTML5가 나온 후부터는 LocalStorage 에도 토큰을 저장하는 일이 많아졌습니다.

• 왜 쿠키보다 로컬 스토리지에 저장했을까?
  • 쿠키보다 더 많은 정보를 저장할 수 있다. (쿠키 4KB, 로컬 스토리지 5MB)
  • 쿠키처럼 모든 http 통신에 딸려들어가지 않는다.
• 그럼 무조건 로컬 스토리지에 토큰을 넣을까?
  • 아니요! 로컬 스토리지는 말그대로 로컬에 데이터가 다 남아있으니 보안상 취약해지기 쉬워요.
    프로젝트 성향에 맞춰 저장 장소는 그때그때 달라져야 합니다.
  • 우리는 쿠키에 저장할거예요. 😉