LocalStorage, SessionStorage, Cookie 차이

NavDevJae·2021년 7월 3일

INTERVIEW PREPARATION

목록 보기

8/15

Web Storage

Web Storage는 HTML5에서 웹의 데이터를 클라이언트에 저장할 수 있게 하는 것이다.
Web Storage는 key/value 쌍으로 데이터를 저장하고 key를 기반으로 데이터를 조회한다.
Web Storage는 LocalStorage, SessionStorage를 별개로 두어서 데이터의 지속성을 구분할 수 있다.
쿠키와 마찬가지로 사이트 Domain 단위로 접근이 제한된다.
SOP(Single Origin Policy)를 따르기에 다른 도메인에서 접근 불가하다.
- 어떤 문서가 다른 Protocol / Port / Host에 있는 리소스 사용을 제한하는 정책.
- 예시) http://velog.io
  - https://velog.io (Protocol Difference)
  - http://vvelog.io (Host Difference)
  - http://velog.io:83 (Port Difference)
- 해결 방법
  - document.domain
    - 서버와는 통신 불가
    - 단순 클라이언트 상에서 출처가 다른 프레임들에 대해 사용된다.
  - CORS (Cross-Origin Resource Sharing)
    - HTTP 헤더를 통해 클라이언트와 서버가 서로 인지하고 한 origin에서 다른 origin의 resource를 사용할 수 있게 하는 매커니즘이다.
    - SOP 에러 방지 위해 다음을 명시한다.
      - Access-Contorl-Allow-Origin : [request한 domain]

Web Storage와 Cookie의 차이

네트워크 트래픽 비용을 절감시킨다.
- 쿠키를 설정하면 모든 웹 요청은 쿠키 정보를 포함하여 서버로 전송된다. (트래픽 비용 증가)
- 반면, Web Storage는 서버로 전송되지 않고 단순히 클라이언트에 저장된 데이터가 존재한다.
문자열 뿐만 아니라 구조화된 객체를 저장할 수 있다.
용량 제한이 없다.
- 쿠키는 갯수와 용량의 제한이 있다.
- 한 사이트에서 저장 가능한 최대 쿠키 수는 20개, 최대 쿠기 크기는 4KB이다.
- 반면, Web Storage에는 갯수와 용량에 제한이 없다.
- 그러나 쿠키 제한으로까지 데이터를 저장할 일이 없다.
  - 영구적으로 데이터를 저장할 수 있다.
- 쿠키는 만료일자를 지정해야 돼서 언젠가는 제거된다. 지정이 안되어 있다면 세션 쿠키가 된다.
  - 세션과 쿠키의 차이
    - 저장위치
      - 쿠키 : 클라이언트에 파일로 저장
      - 세션 : 서버에 저장
    - 보안
      - 쿠키 : request에서 스나이핑 당할 수 있다. 보안 취약.
      - 세션 : 쿠키를 통해 세션 id만 저장하고 그 외는 서버에서 처리하여 비교적 안전.
    - 라이프 사이클
      - 쿠키 : 만료 기간 있으나 파일로 저장되어 브라우저 종료해도 정보가 남아 있을 수 있다.
      - 세션 : 마찬가지로 만료 기간 있으나 브라우저 종료되면 삭제된다.
    - 속도
      - 쿠키 : 쿠키에 정보가 있어 서버에 요청 시 속도가 빠르다.
      - 세션 : 정보가 서버에 있어 비교적 느리다.
- 반면, Web Storage에는 만료기간 설정이 없다.