HTTP는 요청과 응답으로 이루어지는 하나의 사이클이 끝나면 연결이 끊어지는 무상태성을 띈다.

즉 클라이언트의 상태를 보존하지 않는다. 서버가 데이터를 주고 받을 때 서로 기억하지 않으며 연결은 계속해서 끊긴다.

이러한 단점을 보완하기 위해 쿠키 와 웹 스토리지(로컬 / 세션) 과 같이 클라이언트의 상태를 서버가 아닌 클라이언트에 저장해두고 필요할 때마다 데이터를 꺼내 서버에 전달하는 방식을 사용한다.

클라이언트와 서버 간의 연결이 끊기더라도 기억하고 싶은 데이터들을 기억할 수 있도록 등장한 것이다

• 데이터 유효기간 지정 가능

• XXS로부터 안전 : 사이트 간 악성JS코드를 심는 행위 서버에서 쿠키의 httpOnly옵션 설정 시 접근 불가 | - 서버에 불필요하게 데이터 저장하지 않음 (정보를 저장할 뿐 쿠키처럼 서버에 전송 x)

• 넉넉한 데이터 저장 용량

• 도메인 단위로 접근이 제한되는 CORS 특성 덕분에 CSRF로부터 안전 | |

  단점 | - 매우 작은 데이터 용량

• HTTP 요청 시 매번 서버에 전달되어 부담

• 취약한 보안으로 정보 도난 위험

• CSRF 위협

• 문자열만 저장 가능 | - HTML5를 지원하는 브라우저만 사용 가능

• XSS로부터 위험 : local storage에 접근하는 JS코드로 접근 용이 |

• 로컬 스토리지 ) 웹 도메인당 1개씩 생성, 새 창을 띄워도 도메인만 같으면 동일한 데이터를 공유 다른 도메인의 로컬 스토리지에는 접근이 불가능 ⇒ 직접 삭제하지 않는 이상 영구적 저장

• 세션 스토리지 ) 새창, 새탭의 단위로 생성되며 데이터 공유하지 않음. 같은 탭이라도 도메인이 다르면 별도의 스토리지 생성 ⇒ 도메인, 원도우 탭 별 독립적 공간 : 잠깐의 정보를 저장하기에 용이

• 수명 Lifespan

  쿠키는 설정된 만료일까지 유효하다. 만료일이 지나면 자동으로 삭제되거나 사용자에 의해 삭제될 수 있다.

  로컬 스토리지에 저장된 데이터는 사용자가 명시적으로 삭제하지 않는 이상 영구적으로 저장된다.

  세션 스토리지에 저장된 데이터는 해당 세션이 유지되는 동안에만 유효하다. → 브라우저 종료 시 삭제된다.

• 용량 Capacity

  쿠키는 개당 4KB의 용량 제한이 있으며, 도메인당 저장할 수 있는 쿠키 수에도 제한이 있다 (총 20개 정도)

  로컬 스토리지는 일반적으로 5MB ~ 10MB의 용량을 가지고 있다. (도메인당 용량 제한)

  세션 스토리지도 로컬스토리지와 동일한 용량 제한을 가지고 있다.

• 서버 전송

  쿠키는 HTTP요청 시 자동으로 서버에 전송된다. 서버와 클라이언트 간의 상태를 유지하는 데 사용될 수 있다.

  웹 스토리지에 저장된 데이터는 서버로 자동 전송되지 않는다. 필요한 경우 JavaScript로 전송해야 한다.

• 도메인 공유

  쿠키는 도메인 간 공유될 수 있다. 설정된 도메인 및 경로에 따라 쿠키가 공유되는 경우가 있다.

  웹 스토리지는 도메인에 한정되어 있어 다른 도메인에서 접근할 수 없다.

• 보안 Security

  쿠키는 일반적으로 보안에 취약하다. 클라이언트 측에 저장되며, 악의적인 사용자에 의해 조작될 수 있다.

  웹 스토리지는 JavaScript를 사용하여 쉽게 접근할 수 있다. 민감한 데이터는 쉽게 노출될 위험이 있다.

• 사용

  쿠키 : 일시적으로 필요한 가벼운 데이터 저장 … 다시 보지 않음 쿠키 팝업창, 로그인 자동 완성

  로컬 스토리지 : 지속적으로 필요한 데이터 저장 … 자동 로그인

  세션 스토리지 : 일시적으로 필요한 데이터 저장 … 일회성 로그인, 입력 폼 저장, 비로그인 장바구니