웹스토리지 & 쿠키

📌 쿠키

▶️ 쿠키란?

• 브라우저에 저장되는 작은 크기의 문자열(최대 4KB)

▶️ 쿠키 등장 배경

• HTTP는 비연결성, 무상태성 -> 클라이언트와 서버는 연결한 뒤 요청과 응답이 끝나면, 연결을 해제하고 상태 유지 하지 않음. 따라서 항상 처음보는 사용자로 인식
• 쿠키가 없다면 사용자가 웹사이트에 방문했었는 지 알 수 없음

▶️ 쿠키 특징

▶️ 쿠키 종류

▶️ 쿠키 문제점

▶️ 쿠키 보안 문제 해결 방안

📌 웹 스토리지

▶️ 웹 스토리지란?

• DB 서버나 클라우드 플랫폼이 아닌 브라우저를 통해 데이터를 저장하는 기술
• 2가지 종류 - 로컬/세션 스토리지

▶️ 웹 스토리지 특징

▶️ 웹 스토리지 사용 시 고려할 점

• 직렬화 시 순환 참조이거나, 역직렬화 시 JSON 형식이 아니면 다음과 같은 에러 발생
  

▶️ 웹 스토리지 문제점

▶️ 웹 스토리지 보안 문제 해결 방안

📌 정리

• 쿠키 & 웹 스토리지 모두 보안 문제가 있기 때문에 민감한 정보는 저장 X

▶️ 사용 예시

▶️ 쿠키 / 웹 스토리지 차이

1. 쿠키는 매번 서버로 전송한다.

웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키 정보를 포함하여 서버로 전송된다. 웹 스토리지의 경우 저장된 데이터가 클라이언트에만 존재하고 서버 전송은 발생하지 않는다. 그렇기 때문에 네트워크 트래픽이 줄어든다.

2. 웹 스토리지는 단순 문자열을 넘어서 객체 정보 저장이 가능하다.

문자열 기반 데이터 외에 객체를 저장 할 수 있기 때문에 개발 편의성을 향상시키는 주요 장점이다.

3. 웹 스토리지는 용량 제한이 비교적 크다.

쿠키는 개수와 용량에 제한이 있다. 한 사이트에 저장 가능한 쿠키는 최대 20개고 한 사이트의 최대 쿠키 크기는 4KB이다. 그러나 웹 스토리지에는 5MB까지 저장이 가능하다. 쿠키를 사용할 때도 하위 키를 이용해 이러한 제한을 다소 극복할 수 있고, 대부분은 쿠키의 제한까지 데이터 저장할 필요가 없긴 하다.

4. 영구 데이터 저장이 가능하다.

쿠키는 만료 일자가 지정되어 있어서 언젠가 제거되고, 만료일자를 지정하지 않으면 세션 쿠키가 된다. 만일 영구 쿠키를 원하면 만료일을 멀게 설정(Persistent Cookie)하여 해결 가능하다. 이에 반해 웹 스토리지는 만료기간이 없기 때문에 한번 저장한 데이터를 영구적으로 저장할 수 있다.

출처 - https://www.youtube.com/watch?v=-4ZsGy1LOiE