localStorage와 sessionStorage

서버에서 보내주는 토큰을 로컬스토리지가 아닌 세션스토리지에 저장하기로 했다. 왜?

=> 시간이 지나 액세스 토큰이 만료되었을 때, 로그아웃 상태가 제대로 반영되지 않아서, 탭/브라우저 종료로 리셋되는 세션스토리지를 활용하게 됨. 

==> 리프레시 토큰으로 액세스 토큰 재발행하면서 로그인 유지! - 문제 해결 (리프레시 토큰 관련은 다음 글에서 정리) 

===> 브라우저 종료로 토큰 등 저장 내용이 없어지는 게 보안상 나은 선택이라 생각하여 세션스토리지에 저장키로. 

 

 

1. localStorage와 sessionStorage란 무엇인가?

 

1-1. 웹 스토리지 객체

- 웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해줍니다.
- 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않습니다. 
- 두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공합니다.
   setItem(key, value) – 키-값 쌍을 보관합니다.
   getItem(key) – 키에 해당하는 값을 받아옵니다.
   removeItem(key) – 키와 해당 값을 삭제합니다.
   clear() – 모든 것을 삭제합니다.
   key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
   length – 저장된 항목의 개수를 얻습니다.
(출처: https://ko.javascript.info/localstorage)
- WebStorage는 그냥 개발자가 선별해서 넘기면 되므로 http통신에도 부하를 줄일 수 있다.
(출처:https://inpa.tistory.com/entry/JS-📚-localStorage-sessionStorage)

 

1-2. 로컬스토리지 vs 세션스토리지

localStorage	sessionStorage
오리진이 같은 탭, 창 전체에서 공유됩니다.	오리진이 같은 브라우저 탭, iframe에서 공유됩니다.
브라우저를 껐다 켜도 남아있습니다.	페이지를 새로 고침 해도 남아있습니다. 하지만 탭이나 브라우저를 종료하면 사라집니다.

 

 

(참고)

https://ko.javascript.info/localstorage

localStorage와 sessionStorage

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-localStorage-sessionStorage

[JS] 📚 LocalStorage / SessionStorage 정리 (vs 쿠키)