웹 개발을 하다보면 LocalStorage, SessionStorage, Cookie 중 하나라도 들어본 경험이 있을 것이다. 어렴풋이 개념정도는 알고 있었지만 정확히 어떠한 상황에 어떤걸 써야하는지, 차이가 무엇인지에 대해서 자세히 다뤄보자 🏃♂️
Cookie
Cookie란 사용자에 대한 정보를 사용자의 PC에 보관하기 위해서 웹 사이트에서 사용자의 웹 브라우저에 전송하는 정보를 의미한다.
⚡Cookie 란?
사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 의미한다.
앞선 포스트에선 위와같이 설명 했었다.
Web Storage
Web Storage란 웹의 데이터를 클라이언트에 저장할 수 있는 자료구조를 의미하며 key, value가 쌍으로 데이터를 저장하고 key를 기반으로 데이터를 조회하는 패턴이다.
종류에 따라 두가지로 나눠지는데 그것이 바로 LocalStorage (영구 저장소), SessionStorage (임시 저장소)이다. 데이터의 지속성에 따라 둘중에 하나를 선택해서 사용이 가능하다.
Web Storage는 기존의 Cookie와 매우 유사한 개념이며 Cookie의 단점을 극복하고자 하는 개선점이 도입된 방식이다!
(Web Storage도 Cookie와 마찬가지로 도메인 단위로 접근이 제한된다.)
Web Storage vs Cookie
| Web Storage | Cookie |
|---|---|
| 서버로 전송되지 않는다 | 매번 서버로 전송된다 |
| 단순 문자열을 넘어 객체 정보를 저장이 가능하다 | 단순 문자열만 저장이 가능하다 |
| 개수와 용량에 제한이 없다 | 개수와 용량에 제한이 있다 |
| 데이터를 영구적으로 저장이 가능하다 | 만료일자에 데이터가 무조건 삭제된다 |
(Web Storage는 저장된 데이터가 Client에 존재할 뿐 서버로 전송은 이루어지지 않아 네트워크 트래픽 비용을 줄여준다.)
LocalStorage
LocalStorage는 저장된 데이터를 의도적으로 지우지 않는 이상 영구적으로 보관이 가능하며 도메인별로 LocalStorage가 생성된다.
저장 용량의 한도가 Cookie, LocalStorage, SessionStorage 중에서 가장 높다.
SessionStorage
SessionStorage는 저장된 데이터가 지속적으로 보관되지 않는다. Session에 대해서만 데이터를 저장하기 때문에 브라우저를 종료하게 되면 데이터도 삭제된다. (=== 브라우저를 종료하면 SessionStorage도 삭제된다)
데이터 범위 측면
SessionStorage는 같은 사이트의 같은 도메인이라 할지라도 브라우저가 다르면 서로 다른 영역이 된다. 탭 브라우징이나 브러우저를 하나 더 실행해서 같은 사이트를 열었을 때, 이 두페이지의 SessionStorage는 각각 별개의 영역으로 판단하여 서로 침범이 불가능하다.
이는 도메인만 같으면 전역적으로 공유 가능한 LocalStorage와의 큰 차이점이다.
WebStorage의 보안은 서로 다른 도메인의 데이터 침범을 막고는 있지만 사용자를 따로 막고 있지는 않다. 사용자는 얼마든지 저장된 값을 임의로 수정이 가능하다.
