브라우저에 데이터 저장하기 : WebStorage(localStorage와 SessionStorage) & Cookie #1

Vuex를 사용해서 로그인 정보를 state에 저장하고, 페이지가 전환되어도 그대로 유지되도록 하는 방법을 찾다가, vuex의 state를 localStorage로 자동으로 동기화해주는 라이브러리 vuex-persistedState를 사용해봤다. 이전 프로젝트에서도 사이드바에 유저 정보가 바로바로 반영이 안 되거나, 렌더링이 원하는 타이밍에 제대로 되지 않는 이슈가 있었는데, Vue.js가 아무래도 SPA를 기반으로 하다보니, 이런 상황이 앞으로도 자주 발생할 것 같다는 생각이 들었다.

브라우저에 데이터를 저장하는 대표적인 방법은 HTML5에 포함된 자료 구조인 Web Storage의 localStorage, sessionStorage가 있다. 쿠키와 개념이 비슷하지만, 쿠키에서 조금 더 개선점을 가지는 기술이라고 볼 수 있다. 그렇다고 해서 HTML5에서 쿠키가 배척되는 기술은 아니다. 둘다 제대로 짚고 넘어간 적은 없어서 한 번 정리를 해야겠다고 느꼈다.

 

 

웹 스토리지는 클라이언트 상에서 웹 데이터를 저장하기 위한 기술이다. 쿠키는 서버든 클라이언트든 양측 모두에서 생성될 수 있는 데이터이므로 매번 웹 요청이 있을 때마다 서버와 통신을 하는 구조이다. 반면 웹 스토리지는 서버와 통신은 없으며, 클라이언트 상에서만 생성되고, 존재한다. Web Storage는 저장하는 데이터의 영구성에 따라 LocalStorage와 SessionStorage로 나뉜다.

 

웹 스토리지 객체(Web Storage Object)인 localStorage와 sessionStorage

- 브라우저 내 key-value 쌍으로 저장된다. key를 기반으로 데이터가 조회된다.

- Value는 반드시 문자열이어야 한다.

- 쿠키와 더불어 웹 스토리지 객체 역시 동일 출처 정책(SOP)을 따른다. 즉, 데이터 보안을 위해 다른 도메인에서는 접근할 수 없다. 예를 들어 A 도메인에서 저장한 웹 스토리지 데이터는 B 도메인에서 접근이 불가능한 식이다.

- LocalStorage에 저장한 데이터는 명시적으로 지우지 않는 한 영구적으로 보관이 된다. 따라서 브라우저를 다시 실행해도 데이터가 사라지지 않고 남아 있다. 위에서 언급했던 vuex-persistedState는 이 localStorage에 vuex의 state를 동기화해준다.

- LocalStorage에 저장한 데이터는 또한 저장 시 도메인마다 별도의 로털 스토리지가 생성된다. Window의 전역 객체인 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.

- SessionStorage에 저장한 데이터는 SessionStorage라는 window의 전역 객체를 통해 저장과 조회가 이루어진다. 이곳에 저장된 데이터는 지속적으로 보관되지는 않는다. 데이터가 지속되는 범위는 현재 페이지가 브라우징되는 브라우저 컨텍스트 안에서뿐이다. 브라우저가 종료되면 데이터도 휘발된다. 하지만 새로 고침할 경우에는 데이터가 여전히 존재한다. 브라우저가 종료된 것이 아니기 때문이다.

- SessionStorage는 같은 사이트의 도메인이라 할지라도 브라우저가 다르면 서로 다른 영역으로 취급된다. 브라우저의 컨텍스트를 따라가기 때문이다. 즉, Tab Browsing이나 새로운 Browser를 열어 실행했을 때 두 페이지는 별개의 컨텍스트로 별개의 SessionStorage를 갖는다. 서로 침범 불가능하다. 같은 도메인이라면 전역적으로 공유되는 LocalStorage와 구분되는 지점이다.

 

- 상당 부분이 쿠키와 흡사해보이지만, 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않아, 네트워크 트래픽 비용을 줄여줄 뿐만 아니라 용량에 제한이 있는 쿠키와 다르게 많은 자료를 보관할 수 있다. 브라우저별로 일정 용량 이상의 웹 스토리지 객체를 저장할 수 있도록 해준다. 그러나 퍼포먼스를 위해 vuex-persistedstate 라이브러리를 쓸 때는, 모듈별로 필요한 state만 따로 떼어 localStorage에 저장될 수 있도록 해야 한다.

- 하지만 클라이언트 상에서 사용자에 의해 웹 스토리지에 저장된 데이터는 언제나 변경 가능하므로, 임의로 수정되는 데이터에 대해서는 방어 코드를 작성해 막을 수 있다.