인트로
요즘 회사에서 로그인, 회원가입을 하고 있는데요. 로그인한 후 access token과 refresh token을 저장하는 도구로 cross storage 를 사용한다는 이야기를 들었습니다!
cross storage ?? localStorage 와 sessionStorage는 아는데, cross storage는 뭔지 궁금해졌습니다.
Cross Storage 가 뭔가요?
깃허브의 소개를 보니 'Cross domain local storage, with permissions.' (출처: https://github.com/zendesk/cross-storage )'라고 합니다.
하나의 로컬 스토리지의 데이터를 여러 탭, 창에서도, 다른 도메인에서도 사용할 수 있게 해주는 라이브러리입니다!
Cross Storage 는 왜 필요한가요?
원래 로컬 스토리지의 데이터는 프로토콜, 호스트 네임, 포트 번호가 같은(same origin policy) 사이트 간에 공유됩니다.(참고: 위키 https://en.wikipedia.org/wiki/Web_storage)
그런데 한 서비스가 다른 도메인 주소를 가진다면 어떨까요?
예를 들어서 제 블로그가 티스토리가 아니라 자체 블로그라고 생각해볼게요. 로그인할 때는 https://dalin_auth.com/login 이고, 글을 쓰려면 https://dalin_blog.com/create 이라고 해볼게요.
그리고 유저가 로그인했을 때, access token, refresh token이 http://dalin_auth.com/의 로컬 스토리지에 저장된다고 해볼게요. 로그인을 한 후에 글을 쓰려고 하는데, 로컬 스토리지가 달라져서 이 유저가 누구인지/ 로그인했는지 모르게 됩니다.
이럴 때 cross storage를 사용하면, 호스트가 달라도 로컬 스토리지의 데이터를 공유할 수 있습니다!
-적절한 예시인지 잘 모르겠네요ㅠ 의견 환영합니다 !
더 궁금하시다면 ~~
https://github.com/zendesk/cross-storage
GitHub - zendesk/cross-storage: Cross domain local storage, with permissions
Cross domain local storage, with permissions. Contribute to zendesk/cross-storage development by creating an account on GitHub.
github.com
'프론트엔드💛' 카테고리의 다른 글
[Webpack 미니 시리즈] 4부. Webpack과 Vite(작성 예정) (0) | 2022.09.10 |
---|---|
자바스크립트 문자열 길이 맞추기-시간 0:0 -> 00:00 으로 맞추고 싶다면 (0) | 2022.09.06 |
[webpack 미니 발표 3부] Vite는 뭐지? (0) | 2022.08.07 |
[webpack 미니 발표 2부] Webpack의 필요성과 주요 개념 (0) | 2022.08.07 |
[webpack 미니 발표 1부] 모듈 번들러란? (0) | 2022.08.07 |