브라우저 저장소 특징(localStorage, sessionStorage, Cookie)

웹 스토리지란? (Web Storage)

• DOM 저장소라고도 불리며 웹 브라우저에서 제공하는 표준 Javascript API 이다.
• 쿠키와 유사하지만 이보다 더 큰 용량으로 HTTP 헤더로 정보를 전송하지 않고 브라우저에 데이터를 저장할 수 있다.

쿠키를 사용하는 이유??

• HTTP 요청은 상태를 가지고 있지 않기 때문에 브라우저에서 서버에 요청을 보낼 때 누가 보내는지 알 수 없다.
• 쿠키에 데이터를 담아서 요청을 보내면 서버는 쿠키를 통해 파악할 수 있다.
• 클라이언트에서의 어떠한 상태나 데이터를 저장하기 위해 사용하는데 예를 들면 쇼핑몰에서의 장바구니, 로그인 상태 등을 저장할 때 사용된다.

쿠키 (Cookie)

• 특징
  • 만료 기한이 있는 키(key) 값(value) 저장소이다.
  • 한 사이트에서 쿠키는 최대 20개까지, 쿠키 당 최대 4kb까지 저장할 수 있다.
  • 지속적인 서버와 클라이언트의 데이터 교환을 위해 매번 서버로 전송 된다.
  • 네트워크 전송 시 암호화 되지 않은 쿠키 또는 하드디스크에 저장되는 쿠키의 경우 보안에 취약 할 수 있다.
  • 문자열만 저장 가능하다.

로컬스토리지 (window.localStorage)

• 특징
  • 키(Key)와 값(Value)의 쌍 형태로 데이터를 저장
  • 문자열 외에 객체 정보의 저장이 가능하다.
  • 데이터가 클라이언트에만 존재하고 서버 전송은 발생하지 않는다.
  • 만료 기한이 없어 웹사이트나 사용자가 수동으로 지우기 전까지 무기한 저장된다.
  • 최대 5Mb까지 저장간으하며 key를 기준으로 조회하는 패턴이다.
  • 자동 로그인과 같은 지속적으로 현재 탭에서의 필요한 정보를 저장하는데 사용

localStorage Metod

• 데이터 저장 = localStorage.setItem(key, value)
• 데이터 제거 = localStorage.removeItem(key)
• 데이터 읽기 = localStorage.getItem(key)
• 저장된 항목 갯수 = localStorage.length
• 로컬스토리지 비우기 = localStorage.cleare()

세션스토리지 (window.sesstionStorage)

• 특징
  • 현재 브라우저 세션 동안에만 데이터를 저장
  • 브라우저를 닫거나 탭을 닫으면 데이터가 삭제 (새로 고침은 유지)
  • 도메인 단위로 생성되어 같은 도메인이라도 브라우저가 다르면 별개의 영역으로 생성 (서로 컨텍스트가 다름)
  • 입력 값 저장 등의 단발성으로 필요한 정보를 저장하는데 사용

sesstionStorage Metod

• 데이터 저장 = sessionStorage.setItem(key, value)
• 데이터 제거 = sessionStorage.removeItem(key)
• 데이터 읽기 = sessionStorage.getItem(key)
• 저장된 항목 갯수 = sessionStorage.length
• 세션스토리지 비우기 = sessionStorage.cleare()