브라우저 저장소 -Web Storage LocalStorage, SessionStorage, Cookie

프로젝트 중 로그인 로직을 만들 때, 사용자가 로그인에 성공하면 응답 헤더로 받은 access Token 과 refreshToken 을 localstorage에 저장했었습니다. 리덕스로 상태를 저장하고 자 했지만 새로 고침하면 데이터가 사라진다는 점. 그리고 localstorage든 리덕스든 주니어 개발 실력으로 보안성을 가져가기 어렵다는 멘토님의 조언에 localstorage를 택했습니다.
그 이후 기존 홈페이지를 새로고침하면 로그인이 풀리는 에러가 생겨 다음과 같이 해결했습니다. 홈페이지의 url이 변경될 때마다 리덕스 상태인 Islogin와 localstorage 저장소에 accessToken이 있는지 검사하는 로직을 짰습니다. Islogin이 false고 accessToken이 있다면 이전 과정에 사용자가 로그인 인증에 성공했으나 새로고침으로 로그인 상태가 풀렸다는 가정을 내렸습니다. 그래서 local storage에 accessToken이 있다면 localstorage에 같이 저장돼있는 userid로 해당 유저 정보를 다시 가져오는 로직을 구현했습니다. 하지만 이내 다음과 같은 에러 상황이 떠올랐습니다. local storage는 직접 값을 지우지 않는 이상 브라우저가 꺼져도 데이터가 죽지 않는 특성을 가졌는데"만약 다른 홈페이지를 돌아다닌 후 다른 홈페이지에 의해 로컬 스토리지에 해당 홈페이지에 대한 acessToken이 지워지지 않고 우리의 홈페이지를 방문했다면, 우리 서버에 준 accessToken이 아님에도 있다고 처리하고 로그인 되는 상황이 펼쳐지지 않을까?"( 이번포스팅으로 이런 문제는 해결가능하다는 것을 알게되었다. Web Storage는 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한된다. 예를 들면, A도메인에서 저장한 데이터는 B도메인에서 조회할 수 없다. 이는 데이터의 보안 측면에서 당연하다.) 그리고 새로고침할 때마다 로그인 상태가 풀렸는지 매번 검사하고 풀리면 다시 가져오는 방식이 너무 비효율적이지 않을까? "매번 요청마다 헤더에 accessToken과 refeshToken을 담아 보내는 게 너무 비효율적이다." (이 또한 이번 포스팅을 통해 궁금증이 해결됨.)란 고민을 했습니다.

해결법을 찾던 중 브라우저가 종료되면 데이터가 사라지는 sessionStorage에 대한 개념을 알게 되었고, 브라우저의 저장소의 종류에 대해 정확히 개념을 짚고 넘어가자는 생각으로 해당 게시글을 작성하게 되었습니다.

Web Storage

Web Storage는 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 저장소이며 데이터의 지속성에 따라 LocalStorage와 SessionStorage로 나눌 수 있습니다.

LocalStorage
-로컬에 별도로 지속되는 저장소이며 LocalStorage에 저장된 데이터는 브라우저가 꺼져도 삭제되지 않는 특징이 있습니다. (예전 팀원은 작년에 썼던 LocalStorage 데이터가 아직도 남아 있었다는 이야기가 ㄷㄷ ) 데이터를 삭제하고 싶다면 직접 지워야 합니다.

SessionStorage
-세션이 종료되면 SessionStorage에 저장된 데이터는 사라지는 특징이 있습니다.

보통 세션이 종료된다는 의미는 브라우저의 종료를 의마하는데 SessionStorage의 세션 종료시점은 의미가 약간 다릅니다. 

SessionStorage에서의 세션이 종료될때라는 시점은 탭 단위를 의미합니다. 탭마다 다른 SessionStorage가 배정됩니다.

쿠키
localstorage는 로컬 환경에만 있는 클라이언트 저장소라면 쿠키는 서버와 클라이언트 모두 쿠키 데이터를 사용하는 api 가 존재합니다. 보통 쿠키는 서버 클라이언트 양쪽 모두 사용 하나를 고려해야 하며 만약 서버 쪽 사용이 필수적이고 잦다면 로컬 저장소가 아닌 클라이언트와 서버와의 인터렉션이 좀 더 효과적인 쿠키 값을 사용하는 것이 좋습니다.
로컬 스토리지에는 기간 기능이 없는 반면 쿠키는 기간 기능이 있기 때문에 광고 며칠 동안 보지 않기와 같은 기능을 넣을 수 있습니다. 하지만 문자열 제한이 있습니다.

• 4KB의 데이터 저장 제한
• HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약하다.
• 쿠키는 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있다.

 

https://velog.io/@hs0217/%EC%BF%A0%ED%82%A4-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%84%B8%EC%85%98-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80

쿠키, 로컬 스토리지, 세션 스토리지

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

[JS] 📚 LocalStorage / SessionStorage (vs 쿠키와 비교)

https://velog.io/@design0728/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A0%80%EC%9E%A5%EC%86%8C-LocalStorage-SessionStorage-Cookie

브라우저 저장소 - LocalStorage, SessionStorage, Cookie