Cookie, Session, Local Storage

데이터를 저장하는 곳은 데이터베이스만이 아니었다. 웹서핑 시 뭐가 안될 때마다 '쿠키를 삭제 후 다시 접속하세요'라는 말을 자주 들어보았을텐데, 이 쿠키(Cookie)도 사실은 저장소였다. 다만 어디에 저장되어 있느냐가 다를 뿐. 쿠키 외에도 로컬스토리지(Local Storage), 세션스토리지(Session Storage)도 있다. 오늘 정리할 이 세 가지는 모두 클라이언트, 즉 사용자측에 저장되는 저장소다. 데이터를 사용자 컴퓨터에 저장하고, 상황에 따라 자료가 삭제 되거나, 서버와 통신하기도 한다.

Cookie

우리에게 제일 친숙한 저장소가 아닐까 싶다. 익스플로러 사용할 때 브라우저가 느려졌다면 옵션 메뉴에서 많이 한 행동 중 하나가 바로 쿠키 삭제였다. 그 쿠키가 바로 이 쿠키다. 쿠키는 만료 기한이 있는 저장소로 Key와 Value 형태로 이뤄져 있다. 대부분의 브라우저가 지원해 많이 쓰였다. 매 HTTP 요청마다 포함되어 api서버 호출 시 서버와 통신하는 저장소다. 세션스토리지와 로컬스토리지엔 없는 기능으로 쿠키만의 장점이자 단점이다. 또한 쿠키는 용량이 4KB로 용량이 작고, 암호화되어 있지 않아 이곳에 사용자 정보를 저장할 경우 도난 위험이 있다. 서버와 통신한다고 무작정 쿠키에 데이터를 집어 넣으면 안된다.

 

Session Storage

세션스토리지는 브라우저가 실행되어 있을 때만 데이터를 저장한다. 브라우저를 닫는다면 이곳에 있는 데이터는 영구 삭제된다. 세션스토리지를 사용할 때는 이 점을 유의해야 한다. 쿠키와 다르게 세션스토리지는 문자열 데이터만 저장할 수 있다. 대부분 JSON.stringify를 통해 문자열로 바꾸어 세션스토리지에 저장하고, JSON.parse로 복구해 데이터를 사용한다.

 

Local Storage

세션스토리지와 반대라고 받아들이면 쉽다. 로컬스토리지는 브라우저를 닫아도 해당 데이터가 살아있다. 데이터는 주소 단위로 저장된다. idealstring.tistory.com에서 로컬스토리지에 저장했다면 다른 사이트에선 해당 로컬 스토리지가 없다. 브라우저마다 다르지만 저장용량도 최대 5MB까지 제공한다. 게다가 서버에 불필요한 데이터를 저장하지 않는다. 다만, HTML5를 지원하지 않는 브라우저라면 이 공간은 없다고 봐야한다. 세션스토리지와 마찬가지로 문자열 데이터만 저장할 수 있다.

 

사파리에서 본 각 스토리지

크롬에서 본 각 스토리지

마무리

이런 저장소가 있다는 사실에 매우 놀랐다. 쿠키를 내가 사용할 수 있는 저장소라는 것도 놀랐고, 상황에 따라 세션스토리지와 로컬스토리지를 내가 골라서 사용할 수 있는 점도 흥미로웠다. 찾다보니 사용자가 다시 브라우저에 접속했을 때, 닫았을 때 설정 그대로 다시 로드하는 걸 로컬스토리지 사용한다 했을 때 매우 충격이었다. 너무 재밌어보였다. 그래서 나도 조만간 네비게이션 바를 열고 닫았을 때 설정을 로컬스토리지에 넣어두고, 사용자 이전 상태를 그대로 불러오도록 해볼 예정이다. 아마, 로그인이 계속 유지 되는 것도 로컬스토리지 인가 싶은데, 이 부분은 조금 더 찾아보아야지. 다만, 쿠기가 보안에 안좋다면, 다른 스토리지도 비슷할 듯한데 보안은 어떻게 신경쓰는지 조금 더 공부해야할 듯싶다.