Cookie, Local Storage, Session Storage

Antipiebse·2022년 4월 11일
0

다양한 지식

목록 보기
19/21

Cookie란?

우리는 종종 해킹 당하지 않으려면 쿠키를 자주 삭제하거나 아이디, 비밀번호를 자주 바꾸라는 말을 들은 적이 있을 것이다.

cookie는 사용자 정보를 저장하기 위해, 사용자 디바이스에 저장하는 파일이다. 예를 들어 쇼핑몰에서 상품을 구매한다고 가정하면 물건 구매를 위해 id와 pw를 입력할 때 이러한 정보도 기록되고, 장바구니에 담은 상품, 상품의 정보들 등 다양한 정보들이 기록된다. 또한 특정 사용자에게 배너 광고를 타켓팅하기 위해 저장하는 경우도 존재한다.

쿠키는 다음의 요소로 구성되어야한다.

이름

  • 0개 이상의 속성 (이름/값 쌍). 속성은 쿠키의 만료 기간, 도메인, 플래그(예: Secure 및 HttpOnly) 등의 정보를 저장한다.

이때 쿠키의 사양은 아래를 만족해야한다.

  • 4,096바이트 크기의 쿠키를 지원할 것
  • 한 도메인 당 최소 50개 쿠키를 지원할 것(예: 각 웹사이트 당)
  • 총 최소 3,000개 쿠키를 지원할 것.

Cookie의 종류

Cookie의 종류는 크게 퍼스트파티(First-Party)쿠키와 서드파티(Third-Party)쿠키로 나뉜다.

  • 퍼스트파티 쿠키: 웹사이트 속성이 '호스트 도메인'일 경우에 해당하며, 현재 방문하는 도메인에 설정된 쿠키를 의미한다. 예를 들어 쇼핑몰에서 장바구니에 담긴 정보를 저장하기 위한 쿠키이다.

  • 서드파티 쿠키: 방문한 도메인 외, 외부에서 심는 쿠키이다. 사용자의 행동을 애드테크 회사들이 추적하며 사용자의 행동 패턴에 따라 광고를 보여준다.

서드파티 쿠키 지원 중단?
구글과 애플의 사파리에서 서드파티 쿠키 차단 기능을 시행하였다. 그동안 사용자의 프라이버시가 문제가 되었던 것으로 다른 여러 브라우저에서도 이처럼 서드파티 쿠키의 지원이 끊기고 있는 상황이다.

Local Storage와 session Storage?

웹 스토리지 객체(Web Storage Object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있다.

쿠키가 있는데 왜 사용할까?

  • 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있다. 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해준다. 또한 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있다.
  • 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체 조작이 불가능, 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행되기 때문이다.
  • 웹 스토리지 객체는 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.

두 객체는 메소드와 프로퍼티가 동일하다.

  • setItem(key, value) – 키-값 쌍을 보관
  • getItem(key) – 키에 해당하는 값을 반환
  • removeItem(key) – 키와 해당 값을 삭제
  • clear() – 전부 삭제
  • key(index) – 인덱스(index)에 해당하는 키 반환
  • length – 저장된 항목의 개수 반환

마치며

이처럼 여러가지 방법으로 브라우저 데이터를 저장하거나 활용할 수 있으므로 잘 찾아보자.. 어렵다

profile
백엔드 주니어 개발자

0개의 댓글