Cookies VS Local storage

Cookies

• 쿠키(Cookies)는 웹사이트가 사용자의 웹 브라우징 활동을 추적하고 기억하는데 사용됩니다.

장점

• 개인화: 쿠키를 사용하여 사용자 개인화 및 선호도에 따른 경험을 제공할 수 있습니다.
• 세션 관리: 로그인 정보나 세션 ID를 저장하여 사용자의 세션을 관리할 수 있습니다.
• 성능 개선: 쿠키를 사용하여 사용자 데이터를 클라이언트에 저장하면 서버에 빈번한 요청을 줄일 수 있어 성능을 향상시킬 수 있습니다.
  -자동화: 쿠키를 사용하면 이후 다른 요청의HTTP headers에 자동으로 해당 쿠키를 포함합니다.

단점

• 보안 문제: 악의적인 사용자가 쿠키를 탈취하거나 조작할 수 있으며, 개인정보가 노출될 수 있습니다.
• 용량 제한: 각 도메인당 저장할 수 있는 쿠키의 수와 용량에 제한이 있어(대체로 4KB) 상대적으로 복잡한 데이터를 저장하기에는 한계가 있습니다.
• GDPR 등의 규정 준수: 사용자의 동의 없이 개인정보를 쿠키로 수집하거나 사용할 수 없으며, 관련 규정을 준수해야 합니다.
• 쿠키는 모든 요청에 포함되어 있기 때문에 네트워크에 항상 일정량 이상의 부하를 줍니다.
• 쿠키는 CSRF 토큰 구현과 같은 적절한 보안 조치가 마련되어 있지 않은 경우 사이트 간 요청 위조(CSRF-Cross-Site Request Forgery) 공격에 취약합니다.

특징

• 작은 용량: 쿠키는 일반적으로 대략 4KB의 작은 용량을 가지며, 웹 브라우저 내에 저장됩니다.
• 도메인 별 저장: 쿠키는 특정 도메인과 관련되어 있으며, 해당 도메인과 관련된 페이지에서만 접근이 가능합니다. 따라서 외부 도메인은 해당 도메인이 저장하지 않은 쿠키에 대해 접근할 수 없습니다.
  • 예외적으로 서브 도메인은 쿠키에 접근할 수 있습니다. ex) 메인 도메인 maindomain.com에 저장된 쿠키는 다양한 서브 도메인 subdomain.maindomain.com anysub.maindomain.com등으로 부터 접근 될 수 있습니다.
  • 추가로 Cross domain cookies 라고 불리는 third-party 쿠키가 존재하는데 해당 쿠키는 다른 도메인에서 접근 가능합니다. 대체로 광고 목적이나 제3자 광고주의 추적 목적으로 사용됩니다. 하지만 사생활 및 남용 문제로 인해 현대 브라우저들은 해당 쿠키를 금지하는 추세입니다.
• 서버와 클라이언트 간 데이터 전송: 웹 서버가 클라이언트에 쿠키를 전송하고, 클라이언트는 이 쿠키를 저장하고 서버로 다시 전송합니다.
• 유효 기간 설정: 쿠키는 설정한 유효 기간 동안만 유지되며, 기간이 만료되면 자동으로 삭제됩니다.
• 상태 저장: 쿠키를 사용하여 사용자의 로그인 상태, 쇼핑 카트 내용, 개인화된 선호 설정 등을 유지할 수 있습니다.

• 쿠키는 간단하고 효율적인 방법으로 사용자 정보를 관리하고 개인화된 경험을 제공할 수 있지만, 보안과 개인정보 보호 측면에서 주의가 필요합니다.

Local storage

• 로컬 스토리지는(local storage) 웹 브라우저에서 제공되는 작은 데이터 저장소입니다. 이를 사용하여 웹 애플리케이션에서 사용자 데이터를 클라이언트 측에 저장할 수 있습니다.

장점

• 로컬 스토리지는 쿠키보다 비교적 큰 용량을(5MB~10MB) 제공합니다.
• 로컬 스토리지에 저장된 데이터는 클라이언트 측의 JavaScript 코드에서 바로 접근할 수 있으며 이는 더 간편한 조작과 검색을 의미합니다. window.localstorage객체를 통해 접근 가능합니다.
• 로컬 스토리지는 Http 요청에 자동으로 들어가지 않아 네트워크 부하의 부담을 덜어줍니다.
• 인터넷 연결이 없는 상황에서도 사용자 데이터를 유지할 수 있습니다. (로컬 스토리지는 사용자의 기기에 저장되기 때문).
• 서버에서 데이터를 가져오는 대신 로컬에서 데이터를 읽어오므로 더 빠른 로딩이 가능합니다.

단점

• 클라이언트에서 Http 요청을 보낼 때 직접 요청에 정보를 담아줘야 합니다. 이는 개발자의 인적 자원을 더 많이 요구함을 의미합니다.
• 로컬 스토리지는 적절한 예방이 준비되어 있지 않으면 XSS(Cross-Site Scripting) 공격에 취약합니다.
• 보안 이슈: 클라이언트 측에 저장되므로 민감한 정보가 노출될 수 있습니다.
• 크로스 브라우징 이슈: 모든 브라우저에서 완벽하게 호환되지 않을 수 있습니다.
• 클린업 필요: 사용자가 애플리케이션을 더 이상 사용하지 않을 때 데이터를 정리해주어야 합니다.
  로컬 스토리지는 작은 규모의 데이터를 브라우저 내에 저장하고 관리하는 데에 유용한 도구이지만, 보안과 용량 제한을 고려하여 적절하게 활용하는 것이 중요합니다.
• 로컬 스토리지는 현대 브라우저에서 지원 되며 오래된 브라우저는 제한된 지원이나 지원이 없을 수 있습니다.

특징

• 영구적 저장: 사용자가 브라우저를 종료하더라도 데이터는 보존됩니다.
• 같은 도메인 내에서만 접근 가능: 보안상의 이유로 로컬 스토리지는 같은 도메인에서만 접근 가능합니다.