본문 바로가기

Programming/Javascript

[Javascript] HTML5 Web Storage 사용

  • Web Storage란?
    • HTML5부터 제공하는 기능으로 해당 도메인과 관련된 특정데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능이다. 쿠키와 비슷한 기능
  • Web Stroage가 필요한 이유?
    • 쿠키와 Web Storage 모두 브라우저에 저장되기는 하지만 쿠키는 아래와 같은 단점으로 Web Storage를 사용
    • <쿠키단점>
      • 4KB의 데이터 저장 제한
      • HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약
      • 쿠키는 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있음
  • Web Storage의 종류
    • 기존에 우리가 흔히 사용했던 쿠키와 세션처럼 Web Storage도 local Storage와 sessionStorage를 제공한다. SessionStorage라고 해서 기존 세션처럼 서버에 저장된다고 할 수는 없지만 sessionStorage도 로컬 브라우저에 저장된다. 다만 생명주기가 localStorage와 sessionStorage가 서로 다르다.
      • local Storage : 브라우저를 닫았다가 열어도 계속 유지
      • Session Storage : 브라우저가 열려있는 한 페이지를 reload 해도 계속 유지되지만 브라우저를 닫으면 삭제됨