Local storage & Session storage & Cookie

Web Storage

• 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능
  -웹 브라우저가 직접 데이터를 저장

• 키(Key)와 값(Value)의 쌍 형태로 데이터를 저장

• 쿠키와 달리, 필요한 경우에만 꺼내 쓰는 것이므로 자동 전송의 위험성이 없다. 다른 도메인에서 요청하 는 경우에는, 꺼내 쓰고 싶어도 도메인 단위로 접근이 제한되는 특성 덕분에 값을 꺼내 쓸 수 없음

• 쿠키와 달리, 대략 5MB까지의 데이터를 저장할 수 있으며 유효 기간이 존재 x

• HTML5를 지원하지 않는 브라우저에서는 사용할 수 없음

• 로컬 스토리지와 세션 스토리지가 존재

LocalStorage & SessionStorage

LocalStorage

• 저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능

• 도메인별로 생성되며, 다른 도메인의 로컬 스토리지에는 접근이 불가능

• 서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지를 사용

• 지속적으로 필요한 데이터 저장(자동 로그인 등)

• window.localStorage

로컬스토리지 사용법

• 설정 : localStorage.setItem(key, value);

• 탐색 : localStorage.getItem(key);

• 제거 : localStorage.removeItem(key);

• 전체제거 : localStorage.clear()

SessionStorage

• 데이터가 오리진 뿐만 아니라 브라우저 탭에도 종속되기 때문에, 윈도우나 브라우저 탭을 닫을 경우 제거

• 탭/윈도우 단위로 세션 스토리지가 생성

• 동일한 탭/윈도우라도 다른 도메인이라면 또 다른 세션 스토리지가 생성

• 서로 다른 세션 스토리지는 서로 영향을 주지 않으며 독립적으로 동작

• 일시적으로 필요한 데이터 저장(일회성 로그인 정보, 입력폼 저장 등)

• window.sessionStorage

  세션스토리지 사용법

• 설정 : sessionStorage.setItem(key, value);

• 탐색 : sessionStorage.getItem(key);

• 제거 : sessionStorage.removeItem(key);

• 전체제거 : sessionStorage.clear()

Cookie

• 클라이언트(브라우저)에 저장되는 키와 같이 들어있는 작은 파일

• 쿠키의 데이터 형태는 Key와 Value로 구성되고 String 형태로 이루어짐

• 개수와 용량에 있어 제한, 하나의 도메인당 20개의 값만 가질 수 있으며, 하나의 쿠키값은 4KB까지 저장이 가능

• 만료일자를 지정하게 되어 있어 언젠가 제거

• 웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송

구성요소

• Name(쿠키이름)

• Value(쿠키의 저장된 값)

• Expires(쿠키 유효기간 설정)

• Domain(쿠키가 사용되는 도메인 지정)

• Path(쿠키를 반환할 경로)

• Secure(보안 연결)

• HttpOnly(http외 다른 통신 사용 가능)
  *HttpOnly 오로지 http요청이 있을 경우에만 전송.

종류

• Session Cookie
  -보통 만료시간(Expire date) 설정하고 메모리에만 저장되며 브라우저 종료시 쿠키를 삭제.

• Persistent Cookie
  -장기간 유지되는 쿠키(예를 들어 Max-Age 1년), 파일로 저장되어 브라우저 종료와 관계없이 사용.
  -로그인 유지 및 사용자 인증을 처리
  -개인 데이터 노출 가능성이 있어 보안상 좋지 않음
  -유저의 이전 방문상태를 추적하기 위해 사용 (Tracking cookie)

• Secure Cookie
  -HTTPS에서만 사용, 쿠키 정보가 암호화 되어 전송.

• Third-Party Cookie
  -방문한 도메인과 다른 도메인의 쿠키 보통 광고 베너 등을 관리할 때 유입 경로를 추적하기 위해 사용.

단점

• 쿠키에 대한 정보를 매 헤더(Http Header)에 추가하여 보내기 때문에 상당한 트랙픽을 발생.
• 결제정보등을 쿠키에 저장하였을때 쿠키가 유출되면 보안에 대한 문제도 발생

요약

• Cookie
  -일시적으로 필요한 가벼운 데이터 저장이 필요할 때
  (다시 보지 않음 쿠키 팝업창 , 로그인 자동 완성)
  
  
• Local Storage
  -지속적으로 필요한 데이터 저장이 필요할 때
  (자동 로그인)
  
  
• Session Storage
  -일시적으로 필요한 데이터 저장이 필요할 때
  (일회성 로그인, 입력 폼 저장, 비로그인 장바구니)