오늘의 나는 무엇을 배웠을까?
이번 프로젝트의 검색 기록 모달을 구현하기 위해서는 사용자가 검색하였던 내용이 담긴 데이터를 저장해 두어야 할 필요가 있다. 이 데이터를 어디에 어떻게 저장해야 할지 고민하던 중 로컬 스토리지에 저장하고 사용하면 좋을 것 같다는 생각이 들었다. 로컬 스토리지는 웹 스토리지의 한 가지 종류로써, 브라우저에 데이터를 저장하고 사용할 수 있도록 해주는 저장 공간이다. 이 기능을 활용해야 하기 때문에, 간단히 그 내용에 대해 정리해 보았다.
웹 스토리지
웹 스토리지는 클라이언트에서 데이터를 저장할 수 있도록 도와주는 HTML5의 기능이다. 데이터베이스 서버나 클라우드 플랫폼이 아닌 브라우저에 데이터를 저장하게 된다. 데이터베이스에 저장되는 데이터보다 상대적으로 중요도가 낮은 데이터를 일반적으로 저장하게 된다.
웹 스토리지는 다음과 같은 특징을 가지고 있다.
- 키(key) - 값(value) 쌍으로 데이터를 저장한다.
- 이때 키와 값 모두 문자열로 변환되어 저장된다.
- 서버에 전송되지 않아 서버 부담이 없다.
- 도메인 단위로 접근이 제한되기 때문에, 다른 도메인에서 요청하는 경우 접근이 제한되어 자동 전송의 위험성이 없다.
- 대략 5MB까지 데이터를 저장할 수 있으며, 유효기간이 존재하지 않는다.
웹 스토리지는 로컬 스토리지, 세션 스토리지 2가지 종류로 구성되는데, 일부 차이가 있다. 각각의 특징을 알아보도록 하자.
로컬 스토리지 (Local Storage)
로컬 스토리지는 window.localStorage 에 위치하며, 브라우저를 종료해도 유지되는 데이터이다. 따라서, 명시적으로 지워주지 않는 한 영구적으로 저장된다. 로컬 스토리지는 도메인 별로 생성되는데, 이에 따라 다른 도메인의 로컬 스토리지에는 접근이 불가하다. 또한 도메인 별로 생성되는 특성 때문에 다른 윈도우 또는 탭이더라도 도메인이 동일하다면 동일한 로컬 스토리지를 사용하게 된다. 영구적으로 저장되는 특징을 이용하여 지속적으로 필요한 정보를 저장하는데 사용된다.
세션 스토리지 (Session Storage)
세션이란?
일정 시간(방문자가 브라우저를 통해 서버에 접속한 시점 ~ 브라우저를 종료함으로써 연결을 끝내는 시점) 동안 특정 브라우저로부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 일정하게 유지하는 기술.
세션 스토리지는 window.sessionStorage 에 위치한다. 윈도우/탭 단위로 세션 스토리지가 생성되고 윈도우나 탭을 닫을 때 데이터가 삭제된다. 동일한 윈도우/탭이더라도 다른 도메인이면 또 다른 세션 스토리지가 생성이 되며, 서로 다른 세션 스토리지는 서로 영향을 주지 않고 독립적으로 동작한다. 윈도우 복제나 스크립트로 새 창을 연 경우에는 세션 스토리지가 복제되어 생성이 된다. 세션이 종료되면 데이터가 삭제되기 때문에 잠시 동안 필요한 정보를 저장하는데 사용된다.
웹 스토리지의 메소드
웹 스토리지에는 다음과 같은 메소드들이 있다. 사용할 때는 앞에 localStorage , sessionStorage 키워드를 붙여주면 된다.
setItem(key, value): 스토리지에 키 값 보관getItem(key): 키에 해당하는 값 반환removeItem(key): 키와 해당하는 값 스토리지에서 삭제clear(): 스토리지 내 모든 데이터 삭제key(index): index에 해당하는 키를 반환length: 스토리지 내 저장된 데이터 쌍의 개수 반환
여기까지 웹 스토리지와 관련된 내용을 정리해 보았다. 로컬 스토리지와 세션 스토리지의 가장 큰 차이점은 저장된 데이터의 영구성이다. 웹 스토리지 기능을 활용하여 자동 로그인 등의 다양한 기능을 구현할 수 있다. 단, 클라이언트 쪽에서 데이터를 관리하므로 개인정보에 민감한 정보들을 저장하는 것은 피해야 한다고 한다.
