Web Storage란?

Web Storage

서론

이번에 Web Storage와 Session에 대해 정리하게 된 이유는 최근 백엔드 트랙 3명과 술을 마시면서 개발이야기를 하고 있던 대화에서 발생한 문제이다.
술을 마시다 우리가 서비스 하고 있는 앱에 대해 웹은 “세션 스토리지에서 데이터를 관리한다” 라고 했는데 백엔드 세 명이 달려들어서 내가 세션ID 발급안했는데 니가 어케씀, 이런 천한 프엔(=프론트엔드) 녀석! (피해자와 술에 의한 심신 미약으로 인해 실제 내용과 다를 수 있습니다) 라는 득달에 바로 같이 개발한 친구 2명 불러서 세션스토리지에 저장한다는 내용을 해명하는데 30분이 걸렸다.
다들 취해서 억까의 냄새가 많이 났지만, 내가 틀리지 않음을 증명했다.
그렇기에 술을 마셔도 더 확실하고 자세하게 설명할 수 있도록 공부하려고 한다.

Web Storage

web Storage는 웹 어플리케이션에서 데이터를 지역적으로 저장할 수 있도록 하는 저장소이다. 우리가 생각하는 쿠키와 동일 시 취급되기도 한다.
쿠키와 Web Storage 모두 브라우저에 저장되기는 하지만 쿠키는 아래와 같은 단점이 있기 때문에 Web Storage를 사용한다는 것을 알고 있으면 좋을 것 같다.
* 4KB의 데이터 저장 제한
* HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약
* 쿠키는 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있음

web Storage는 local Storage, session Storage 두가지로 나뉜다

• local Storage

  로컬, 즉 해당 지역 PC 내부에 저장되며, 영구적인 데이터로 활용할 때, 저장된다.
  사용자가 직접 지우거나 하지 않는 이상, 계속 PC 파일로 남아있다. (영구성이 특징)

• session Storage

  세션스토리지, 각 도메인에 대한 독립적인 저장공간. 유효기간은 페이지세션이 유지되는 동안 제공한다. 브라우저 또는 탭을 닫힐 때가지만 데이터를 유지한다.

간단하게 특징을 정리해보았는데 이들의 가장 큰 특징이라고 하면 local(=local Storage)은 데이터를 사용자나 코드로 삭제하지 않는 이상, 영구적으로 남게 되며, session(=sessionStorage)는 탭이나 브라우저가 유지되는 동안만 유지된다는 큰 차이점을 알 수 있다.

web Storage 인터페이스

storage
Web Storage API 의 Storage 인터페이스는 특정 도메인을 위한 세션 저장소 또는 로컬 저장소의 접근 경로로서 데이터를 추가하고 수정하거나 삭제할 수 있습니다.

• 속성
  • Storage.length
• 메서드
  • Storage.key()
  • Storage.getItem()
  • Storage.setItem()
  • Storage.removeItem()
  • Storage.clear()

Window
Web Storage API는 Window 객체를 확장함으로 Window.sessionStorage 와 Window.localStorage 속성을 추가해 현재 도메인의 세션과 로컬 Storage 객체의 접근을 가능케 한다.
새로운 항목을 추가하는 등 저장 공간이 변경될 때 발생하는 Window.onstorage (en-US) 이벤트 처리기도 추가한다. 이는 이벤트 리스너로 생각하면 좋을 것 같다.

StorageEvent
storage 이벤트는 저장 공간이 변경될 때 Window 객체에서 발생합니다

정리

web Storage는 웹에서 저장되는 데이터를 쿠키보다 더 큰 용량을 저장하기 위한 저장소이다. 그 종류는 2가지, local Storage, session Storage로 나뉘는데 이들의 사용을 판단하는 기준을 한다면 사용자의 컴퓨터에 영구적으로 필요한 데이터가 필요한 경우에는 local Storage를 활용하고, 세션 기간동안만 활용하는 데이터는 sessionStorage를 활용하는 것이 좋다.
또한 Storage 객체를 활용한 저장과 삭제가 가능하며 해당 메서드들도 존재하니 이를 잘 활용하는 것이 좋다.

reference:
web storage