개발자들을 위한 도구
개발을 할 때 우리가 참고해야 할 그 모든 것을 담고 있는 개발자 도구! 그 중에서 가장 자주 쓰이고 유용한 부분들, 궁금했던 부분들에 대해서 정리해보았습니다.
1. 로컬 스토리지, 세션 세션 스토리지, 쿠키의 차이점?
Local storage, session storage, cookie?
스토리지는 뭐지? 로컬은 뭐지? 쿠키...먹는건가?😮
콘솔의 메뉴 중에서 Application 탭에 가보면 이러한 화면을 볼 수 있습니다. 왼쪽에 Storage 부분이 보이시나요
-Local Storage
-Session Storage
-Cookies
우선 Storage라는 이름에서 예상하셨겠지만, 이곳은 어떤 데이터를 저장하는 곳이라고 생각하시면 됩니다.
Storage vs Cookie
Cookie에 저장되는 정보는 서버와 연동되며, storage는 그렇지 않습니다.
또, cookie는 그 저장되는 기한을 정할 수 있습니다. 즉 마감기한이 있는 저장소라고 생각 하면 됩니다.
예를 들어서, 팝업창에서 "오늘 하루 동안 보지 않기", "일주일 동안 보지 않기" 와 같은 옵션을 클릭해본 적이 있으신가요? 만약 우리가 이런 옵션을 선택하면 그 정보를 쿠키에 저장했다가 그 시간이 지나면 다시 활성화를 해주는 것이죠.
Local vs Session
로컬 스토리지와 세션 스토리지의 가장 큰 차이는 바로 데이터의 영구성입니다. 로컬 스토리지는 창을 닫아도 없어지지 않는 그 사이트에 저장되어 있는 정보입니다. 사용자가 일부러 지우지 않는 한 지워지지 않습니다.
자 우리가 매일 매일 사용하는 구글 크롬! 매번 구글 크롬창을 열 때마다 로그인을 해야 한다면 어떨까요? 생각만해도 귀찮음 지수가 폭발할 것 같습니다.
그래서 우리가 자주 쓰는 로그인과 같은 정보는 local storage에 저장하는것이 좋겠죠?
반면에 일회성을 부여하고 싶은 정보 혹은 꼭 그래야만 하는 정보들도 있을 것입니다. 공인인증서 비밀번호 혹은 계좌번호와 같은 보안에 민감한 정보는 그 창을 닫는 동시에 사라져야 하겠죠?
좋아하는 가수의 콘서트를 보러 가기 위해서 티켓팅을 해보신 적이 있으신가요? yes24는 사용자가 로그인을 했을 경우, 그 로그인에 성공했다는 것을 로컬 스토리지에 저장해 놓습니다. 그래서 다른 창을 통해 들어가 티켓을 구매하려고 할 때마다 로그인을 할 필요가 없습니다. (다른 사람이 내 티켓을 가져갈 수도 있는데 로그인을 하라는 내용이 나오면 정말 울분이 터지겠죠?)
이렇게 어떤 정보를 로컬에 넣을 것이냐 세션에 넣을 것이냐는 그 상황과 데이터의 종류에 따라서 달라질것 입니다.
