728x90


이 섹션을 읽기전에 참고에 있는 cookiesession을 읽고 읽는 것을 추천한다.

그래야 흐름이 맞기 때문이다.

물론... 읽기 귀찮은 사람들 위해서 간략히 설명을 하자면

cookie는 클라이언트에 정보를 저장하는 기술, session은 서버에 정보를 저장하는 기술이다.


이번에는 Web Storage에 대해서 설명하겠다. 처음 듣는 사람도 꽤 있을 것이다.

책이나 교수들이 다 옜날거 위주라서 Web Storage에 대해서 모르는 사람이 많다.

여기를 참조해서 보면 논의는 2013년부터 됬고 실제로 제대로 쓰이게 된 버전은 2016년이다.

즉 따끈 따끈한 신기술이다.

이 기술은 브라우저에 매우 종속된 기술인데 브라우저에서 얼만큼 지원하는지는 여기를 보면 알 수 있다.


일단 어떤 기술인지 부터 간략하게 한줄로 설명하겠다.

클라이언트에 정보를 저장하는 key-value형태의 데이터

일종의 db라고 할 수 있다. 위키피디아에서 확인해본 데이터를 보면 chrome과 firefox, safari는 sqlite에 저장하고

ie와 opera는 xml데이터로 파일형태로 저장되어있다.


여러분은 여기까지 오면 슬금슬금 생각나는게 있을것이다.


바로 cookie!! 설명이 너무너무 비슷하다.

session도 cookie도 statless한 http에 state를 줄려는 기술이다.

web storage역시 마찬가지이다. 그런데 어떻게 봐도 cookie와 매우 비슷한 기술이다.

하지만 쿠키와는 다르다. 쿠키와 어떻게 다른지는 아래에서 설명하도록 하겠다.


먼저 백문이 불여 일견이니 webstorage에 대해서 보도록 하자.


localStorage - 로컬에 도메인 별로 지속되는 storage

sessionStorage - 세션이(프로세스, 탭, 브라우저) 종료될 때까지 지속되는 storage


일단 먼저 localStorage부터 알아보자.


나는 지우기 직전까지 죽지않아 => localStorage

localStorage는 시간제한이 없고 브라우저가 꺼져도 죽지 않는다.

값을 지우려면 직접 지워줘야한다.



이정도면 그냥 역활을 다한거 같지만 더 좋은게 있다.

바로 Storage Event이다.



난 세션이 끊기면 죽는다 => sessionStorage

세션 스토리지는 localStorage와 쓰는 느낌이 비슷한데 커다란 차이점이 있다.


그것은 바로 소멸 타이밍이다. localStorage는 소멸타이밍이 없다. 즉 직접 지워줘야한다.

그러나 sessionStorage는 세션의 종료시 죽음을 맞이한다.


그런데 이 session이라는 용어는 아주 우리가 일반적인 의미의 세션과는 좀 다르다.


보통 세션의 종료는 일반적으로 브라우저의 종료를 뜻한다.

새창을(프로세스)띄우건 새탭을 띄우건 이는 세션종료를 의미하지 않는다.

그러나 sessionStorage에서 의미하는 세션은 가장 작은 단위인 탭단위를 의미한다.


탭마다 sessionStorage는 따로 배정되며 서로의 영역을 공유하지 않는다.

따라서 값을 침범할 수 도 없다.



그래서 sessionStorage는 더 각별하다.

cookie가 가졌던 근본적인 문제인 도메인 같으면 항상 쿠키를 보낸다는 조건이 sessionStorage를 통해 해소하려한 흔적이 보인다.


이제 사용법은 어느정도 알려드린 것 같다.


그럼 이제 cookie와의 차이점을 알려줘


이 까지만 봐도 차이점은 보이지만 그래도 명시적으로 설명하는게 좋을 것 같다.

요약같은 느낌으로 설명하면 될것 같다.


쿠키를 설명할 때 용량제한 시간제한 갯수제한이 있다고 했다.

Web Storage도 제한은 있지만 시간제한과 갯수제한은 없다.

용량 제한이 있는데 ie는 10MB, 다른 브라우저는 5MB의 용량제한을 가진다.

3~5kb남짓의 쿠키보다는 압도적인 용량을 가진다.

용량은 몰라도 시간제한이 없는건 쿠키와 비교했을 때 WebStorage의 단점이다.

이러한 점에서 Session과 좀 비슷한 성향이 있는데 사용자가 WebStorage를 일일히 관리해줘야한다는 점이다.

악의적이게 사용하는 사람이 없다면 용량이 다 찰일은 크게 없겟지만... 어디가나 마친놈은 있다.


session과 비슷하다고 느껴지는것은 session을 설명할 때 프로그래밍 적인 테크닉이 가능하며

각각언어에 맞는 객체및 데이터를 session에 보관할 수 있다.

WebStorage역시 그냥 자바스크립트 객체이다.

그래서 자바스크립트 객체를 넣는것 역시 가능하며 문자열에 크기제한이 있는 cookie에 비해서 비교우위를 가진다.


그리고 requst와 response시에 모든 쿠키를 다 넘겨야 했는데 원래 비용이 큰 http통신에 더 큰 부하를 준다.

그러나 WebStorage는 그냥 개발자가 선별해서 넘기면 되므로 http통신에도 부하를 줄일 수 있다.


브라우저가 종료되면 자동으로 사라지는 쿠키를 재현하기 위해서 sessionStorage를 도입하였다.

sessionStorage의 존재로 세션이 유지되는 동안만 필요한 데이터를 저장할 수 있게 되었다.

또한 쿠키는 domain별로 데이터가 분리되지만 같은 브라우저라면 값을 공유했다.

sessionStorage는 다른 탭이라면 데이터가 공유도지 않는다.

만약 공유할 데이터는 localStorage에 넣으면 되므로 선택의 폭이 커졌다.


쿠키는 자신의 변화를 감지할 방법이 없다. web storage는 자신의 변화를 이벤트로 감지할 수 있다.


1.제한

cookie - 용량제한, 시간제한, 갯수제한 존재

webstorage - 용량제한만 존재


2.시간제한 설정

cookie - 시간제한 설정가능

webstorage - 시간제한 설정 불가능


3.데이터형

cookie - 문자열만 저장가능

webstorage - javascript 객체 저장가능


4.데이터 전송

cookie - 모든 쿠키를 전송해야함, cookie를 가공함으로써 발생하는 side effect존재

webstorage - 개발자가 선택해서 전송할 수 있고 가공할 수도 있음


5.세션의 정의

cookie - 같은 브라우저면 다른 탭이나 다른 창(프로세스)일지라도 같은 세션이라고 정의

webstorage - 같은 브라우저일지라도 sessionStorage의 경우 다른 탭이면 다른 세션이라고 정의


6.이벤트

cookie - 이벤트 없음

webstroage - 이벤트 존재


쿠키와 비교하면 장단점이 존재하지만 대부분의 면에서 쿠키보다는 낫다.

왜냐하면 쿠키의 단점을 보완하기 위해서 나온것이 webstorage이기 때문이다.

그래도 필자가 생각하는 cookie의 비교우위는 webstorage가 아무래도 쓰는게 더 까다롭다는 점이다.

시간제한도 없는데다가 데이터는 영속성을 띈다.

게다가 항상 코드를 작성해서 데이터를 넘겨줘야한다는 점이서 유지보수는 좀더 까다로운 편이다.


session과 비교했을 때는 어때?

webstorage는 원리는 cookie같지만 사용하는 느낌은 session에 더 가깝다.

사용해보면 은근히 session과 비슷한 점이 많다.

client단에서 사용하는 session느낌이다.


session은 정말 훌륭한 방법이지만 계속 cookie나 webstorage로 눈을 돌리는 이유는 간단하다.

서버에 부하가 너무 많이 걸리기 때문이다.

cookie나 webstorage에 고통을 분담해버리는게 좋을 것이다.


그러나 실상은 좀 그렇지는 않은편이다.

세션은 세션만의 영역이 확고하게 존재한다.


webstorage가 cookie의 많은 점을 보완한건 맞지만 브라우저별로 데이터를 나눈다는 점은 여전하다.

그리고 cookie가 떠앉는 보안 문제는 webstorage역시 같이 가지는 경우가 많다.


그래서 session역시 사용해야할 일이 많을 것이다.

+ Recent posts