Cookie vs LocalStorage vs SessionStorage

개요

Cookie와 LocalStorage다시 한번 확인을 해봐야 하는 계기가 생겼다.
Nuxt를 개발 할때 사용자 인증 유무에 따라 Login페이지 강제 이동을 시켜야 할때가 있었는데
Vue에서는 Vuex를 사용하여 LocalStorage에 사용자 정보를 입력하여 MiddleWare에서 처리를 했다.
하지만 Nuxt에서는 SSR처리를 하다보니 상세 페이지 및 로그인외 페이지에 직접 접근을 하게 되면 화면이 보였다가 Login페이지로 이동하였다.
이유는 Vue에서는 CSR기반이다 보니 바로 LocalStorage에 접근을 하지만 Nuxt에서는 Server단계에서 LocalStorage에 접근을 못하니 이러한 문제가 생겼다.
추후에 Nuxt에 ServerMiddleWare가 있다는 것은 알았지만 한번더 상기 시키는 좋은 계기가 되었다.

솔직히 jindev-t의 블로그를 들어가 보면 정리가 엄청 잘되어 있다.
하지만.. 개인 블로그에서 좀더 찾기 쉽게 하기 위해 작성을 하는거고 좀더 자세한 내용은 위의 블로그에 들어가서 보면 좋을꺼 같다.

간단 비교

	Max Size	Expired	가용성	Data Type
Cookie	쿠키당 4KB, 도메인당 쿠키 20개	쿠키는 만료일자를 지정하게 되어 있어 언젠간 제거된다. (만료일자를 지정하지 않으면 세션 쿠키가 된다.)	Server에서도 접근가능	String only, as key-value pairs
LocalStorage	브라우저당 앱당 5MB. HTML5 사양에 따라 사용자가 필요할 때 이 제한을 늘릴 수 있습니다.	삭제하기 전까지 Disk에 남아있는다.	동일한 웹 앱을 실행하는 한 브라우저의 모든 창과 탭에서 공유
SessionStorage	시스템 메모리에 따라 제한됨	원래 창이나 탭이 있는 동안에만 지속됨	그것을 생성한 창이나 탭 내에서만 접근 가능

---

참고

ServerMiddleWare
HTTP_cookie
DevGuideHtml5Storage