웹 개발에서는 사용자를 추적하거나 환경 설정 등을 저장하기 위해 클라이언트 측에 일부 정보를 저장해야 합니다. 일반적으로 쿠키, 로컬 스토리지 및 세션 스토리지의 세 가지 옵션을 고려하게 됩니다. 이 블로그에서는 , , 세 가지 옵션을 자세히 소개하고 장단점을 비교하며 어떤 시나리오에 적합한지 알아보겠습니다.
쿠키, 로컬 스토리지 및 세션 스토리지란 무엇인가요?
쿠키는 주로 서버 측에서 읽는 데 사용되며, 사용자를 추적하거나 사용자의 상태를 유지하는 데 사용될 수 있습니다. 쿠키는 모든 HTTP 요청과 함께 서버로 전송됩니다.
반면 로컬 스토리지는 클라이언트 측에서만 읽을 수 있으며 웹사이트 성능에 영향을 주지 않고 사용자 브라우저에 대량의 데이터를 저장하는 데 사용됩니다.로컬 스토리지 데이터는 영구적이며 자바스크립트 또는 브라우저 캐시 지우기를 통해서만 지울 수 있습니다.
세션스토리지와 로컬스토리지 모두 클라이언트 측에 데이터를 저장하고 쿠키보다 더 많은 저장 공간을 제공한다는 점에서 매우 유사합니다. 하지만 브라우저 세션이 종료되면, 즉 사용자가 브라우저 탭이나 창을 닫으면 세션스토리지의 데이터는 삭제됩니다.
쿠키, 로컬 스토리지 및 세션 스토리지의 장단점 비교
| 쿠키 | 로컬 스토리지 | 세션 스토리지 | |
|---|---|---|---|
| 장점 | - 오랜 지원 역사 - 데이터 지속성 - 만료일 설정 가능 - HTTPOnly로 표시할 수 있어 사용자 브라우저에 대한 XSS 공격 제한 가능 | - 대부분의 최신 브라우저에서 지원 - 데이터는 브라우저에 직접 저장되며 영구적입니다. - 로컬 스토리지 데이터에 상동성 규칙 적용 - 모든 HTTP 요청과 함께 전송되지 않음 - 도메인 네임당 최대 5MB의 저장 공간 | - LocalStorage와 동일하지만 브라우저 세션이 종료되면 데이터가 지워집니다. |
| 단점 | - 모든 쿠키 데이터는 문자열로 되어 있어 데이터 구문 분석이 어려울 수 있습니다. - 데이터는 암호화되지 않으며 모든 HTTP 요청과 함께 전송됩니다. - 제한된 저장 공간 | - IE 8, 파이어폭스 3.5, 사파리 4, 크롬 4, 오페라 10.5, iOS 2.0, 안드로이드 2.0은 지원되지 않습니다. - 서버에 저장된 클라이언트 정보가 필요한 경우 서버가 적극적으로 정보를 전송해야 합니다. | - 로컬 스토리지와 동일 |
| 관점 | 쿠키 | 로컬 스토리지 | 세션 스토리지 |
|---|---|---|---|
| 스토리지 크기 | 4KB로 제한 | 5MB-10MB | 5MB-10MB |
| 데이터 수명 주기 | 만료일이 자동으로 삭제된 후 만료일을 설정할 수 있습니다. | 데이터는 만료 시간이 없으며 자바스크립트 또는 브라우저 캐시를 지워야만 지울 수 있습니다. | 브라우저 탭을 닫으면 데이터가 지워집니다. |
| 모든 HTTP 요청과 함께 전송되나요? | 예, 쿠키 데이터는 각 HTTP 요청과 함께 서버로 전송됩니다. | 아니요, LocalStorage 데이터는 클라이언트 측에만 저장되며 HTTP 요청과 함께 전송되지 않습니다. | 아니요, 세션스토리지 데이터는 클라이언트 측에만 저장되며 HTTP 요청과 함께 전송되지 않습니다. |
| 데이터는 어디에서 읽나요? | 서버 측 | 클라이언트 | 클라이언트 |
| 교차 세션 지속성 | 사용자가 브라우저의 쿠키를 지우거나 쿠키가 설정된 만료 날짜에 도달하지 않는 한 영구적으로 유지됩니다. | 브라우저를 닫아도 데이터는 유지됩니다. | 브라우저 탭을 닫으면 데이터가 지워집니다. |
| 기록 지원 | 매우 오랜 지원 역사 | 최신 브라우저에서는 잘 지원되지만 일부 구형 브라우저에서는 지원되지 않습니다. | 최신 브라우저에서는 잘 지원되지만 일부 구형 브라우저에서는 지원되지 않습니다. |
| SSL | be | 아니요 | 아니요 |
| 프런트엔드 및 백엔드 액세스 | 클라이언트 | 클라이언트 | 클라이언트 |
| 클라이언트 | 결함 | 그렇지 않습니다. | 그렇지 않습니다. |
| 지원되는 데이터 유형 | 문자열만 지원 | 문자열만 지원 | 문자열만 지원 |
| 문자열만 지원 | 문자열만 지원 | 가능 | 다음과 같은 경우 |
쿠키, 로컬 스토리지 및 세션 스토리지가 적용되는 시나리오
애플리케이션이 클라이언트 측에서 데이터를 읽어야 하는 경우, 모든 HTTP 요청에서 데이터를 전송하는 데 대역폭을 낭비하지 않으므로 로컬 스토리지 또는 세션 스토리지를 선택하는 것이 좋습니다.
서버에 이 데이터가 필요한 경우 쿠키가 더 적합할 수 있는데, 로컬 스토리지와 세션 스토리지는 어떤 방식으로든 데이터를 전달해야 하기 때문입니다. 그러나 서버가 요청당 데이터의 일부만 필요로 하는 경우에는 로컬 스토리지 또는 세션 스토리지를 사용하는 것이 허용될 수 있습니다.
결론
전반적으로 쿠키, 로컬 스토리지, 세션 스토리지는 각기 장단점이 있으며, 어떤 것을 사용할지는 주로 애플리케이션이 데이터를 읽어야 하는 위치, 데이터 저장 공간 및 수명 주기에 따라 달라집니다. 실제로는 다양한 요구 사항을 충족하기 위해 쿠키, 로컬 스토리지 및 세션 스토리지를 동시에 사용할 수 있습니다.
