localStorage 사용하기

이번에 외주 작업으로 리더십 진단 페이지를 제작하게 되었다. 사용자 데이터, 그리고 사용자가 입력한 40여 개 문항에 대한 응답 데이터를 어딘가에 저장한 뒤, 그것을 바탕으로 진단 결과를 보여주는 작업이다. 데이터를 서버에 저장할 수도 있겠지만, 이번 프로젝트는 서버는 따로 두지 않고 브라우저 위에서만 돌아가도록 제작해 달라는 요청을 받았다.
그래서 브라우저에 데이터를 저장하고자 할 때 어떤 방법을 적용해야 할지 알아보았는데, 일단 클라이언트(브라우저)단에 데이터를 저장하는 방법으로는 Cookie나 localStorage 등이 있다.
이 글에서는 localStorage를 사용한 예시를 코드와 함께 간단히 정리하고자 한다.

localStorage 개요

Web Storage API는 브라우저에서 쿠키를 사용하는 것보다 훨씬 직관적으로 key/value 데이터를 안전하게 저장할 수 있는 메커니즘을 제공합니다. –– MDN “Web Storage API 사용하기”

localStorage는 문자열의 key/value pair로 이루어져 있으며, HTML5에서 추가된 일종의 저장소이다. localStorage에 값을 저장할 때는 localStorage.setItem(key, value), 꺼내올 때는 localStorage.getItem(key)와 같이 사용한다. localStorage.removeItem('key')로 특정 데이터를 삭제하는 등의 작업도 가능하다.
(MDN — Web Storage API 사용하기 참조)
크롬 개발자도구를 열어서 ‘Application 탭 > Storage > Local Storage’에 보면 현재 localStorage에 저장된 데이터들을 확인할 수 있다.

기타 유사한 방법들

cookie는 서버와 클라이언트 사이의 데이터 교환을 위해 사용하는 것이다. 게다가 로컬 환경에서 cookie에 값을 저장하고 가져오는 작업이 원활하게 이루어지지 않았다.
이번 프로젝트의 특성을 감안한다면, localStorage보다는 sessionStorage를 사용하는 것이 더 좋을 수도 있겠다. sessionStorage는 localStorage와는 달리 데이터가 영구적으로 저장되지는 않는다.