Web Storage

클라이언트에 데이터를 저장할 수 있도록 HTML5부터 나온 새로운 방식의 데이터 저장소이다. Key-Value 형태로 데이터를 저장하여 Key를 기준으로 데이터를 조회하며 영구 저장소 (Local Storage)와 임시 저장소 (Session Storage)를 따로 두어 데이터의 지속성을 구분할 수 있기 때문에 환경에 맞게 선택하여 사용할 수 있다.

장단점

• 서버에 불필요하게 데이터 저장이 되지 않는다.
• 넉넉한 데이터 저장 용량을 가지고 있다.
• 문자열 외에도 Javascript의 모든 원시형 데이터와 객체 저장이 가능하다.
• 도메인 단위로 접근이 제한되는 CORS 특성 덕분에 CSRF 취약점으로부터 안전하다.
• HTML5를 지원하는 브라우저만 사용이 가능하다는 단점이 있다.
• XSS로부터 위험하다는 단점이 있다.

Session Storage

새 창, 새 탭의 단위로 Storage가 생성되며 데이터를 공유하지 않으며 같은 탭이라도 도메인이 다르면 또 다른 Session Storage가 생성된다.

즉, Session Storage는 도메인 및 윈도우 탭별로 구분되는 독립적인 공간으로 사용자가 브라우저의 창을 닫거나 탭을 닫으면 저장된 객체가 사라지기 때문에 잠깐의 정보를 저장하기에 용이하다. 주로 회원가입 입력폼, 일회성 로그인에 사용된다.

Local Storage

Local Storage는 웹 도메인 당 1개씩 생성되며 Session Storage와 다르게 새 창을 띄워도 도메인만 같으면 동일한 데이터를 공유하게 되고 다른 도메인의 로컬 스토리지에는 접근이 불가능하다.

또한, 직접 Local Storage를 삭제하지 않으면 영구적으로 데이터를 저장하고 쿠키를 이용하지 않는 앱 환경에서 자동 로그인 등에 주로 사용된다.

참고사항 및 마무리

https://ko.javascript.info/localstorage [Storage 관련 코드 예제]