[springboot] 쿠키, 웹 스토리지(LocalStorage, SessionStorage)

쿠키(Cookie), 로컬 스토리지(LocalStorage), 세션 스토리지(SessionStorage)는 모두 **웹 저장소(Web Storage)**의 일종으로, 클라이언트측(브라우저)에서 데이터를 저장하는 데 사용됩니다. 하지만 이 세 가지는 저장 방식, 용도, 특징 등에서 차이가 있습니다. 각각의 주요 차이점과 특징을 아래에서 비교해 보겠습니다.

1. 쿠키 (Cookie)

쿠키는 서버와 클라이언트 간에 HTTP 요청과 응답을 통해 전송되는 작은 데이터 조각입니다. 주로 세션 관리, 사용자 인증, 트래킹 등에 사용됩니다. 쿠키는 HTTP 헤더에 포함되어 서버로 전송되며, 클라이언트 측에 저장됩니다.

주요 특징:

• 서버와의 상호작용: 쿠키는 클라이언트에서 서버로 자동으로 전송됩니다. 매 HTTP 요청 시, 클라이언트가 저장한 쿠키 값이 자동으로 포함되어 서버에 전달됩니다. 클라이언트측에서 쿠키를 읽어들여 수정하면 서버측에서 수정된 쿠키 내용을 읽어들여 서로 통신이 가능합니다.
• 용량 제한: 쿠키의 용량은 보통 4KB로 제한됩니다. 한 도메인당 저장할 수 있는 쿠키의 수는 보통 20개 이하입니다.
• 만료 날짜 설정 가능: 쿠키는 만료 날짜를 설정하여 영구적으로 저장하거나 세션이 종료되면 삭제되도록 할 수 있습니다. 만약 만료 날짜를 설정하지 않으면, 쿠키는 세션 쿠키가 되어 브라우저를 종료하면 삭제됩니다.
• 데이터 전송: 쿠키는 각 요청에 포함되어 서버로 전송되기 때문에, 네트워크 트래픽에 영향을 미칠 수 있습니다.

주요 용도:

• 세션 관리: 로그인 세션을 유지하기 위해 사용자 인증 정보나 세션 ID를 쿠키에 저장. (더 명확히 하기 위해 세션저장소 DB
• 사용자 트래킹: 사용자의 방문 정보를 추적하고, 사용자의 행동을 기록하는 데 사용됩니다.
• 저장소 크기 제한: 쿠키의 크기는 작고, 많은 양의 데이터를 저장할 수 없습니다.

쿠키 예시:

// 쿠키 저장
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2025 23:59:59 GMT";

// 쿠키 읽기
console.log(document.cookie); // "username=JohnDoe"

// 쿠키 삭제 (만료 날짜를 과거로 설정)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

 

2. 로컬 스토리지 (LocalStorage)

로컬 스토리지는 브라우저에 영구적으로 데이터를 저장하는 방법으로, 서버와의 상호작용 없이 클라이언트 측에서만 사용됩니다. 로컬 스토리지는 데이터가 브라우저를 종료하고 다시 열어도 계속 유지됩니다.

주요 특징:

• 영구적 저장: 로컬 스토리지에 저장된 데이터는 브라우저를 닫고 다시 열어도 유지됩니다.
• 용량: 로컬 스토리지는 일반적으로 5MB~10MB 정도의 용량을 제공합니다.
• 서버와의 상호작용 없음: 로컬 스토리지에 저장된 데이터는 자동으로 서버로 전송되지 않으며, 클라이언트 측에서만 사용됩니다.
• 데이터 전송 없음: 로컬 스토리지에 저장된 데이터는 HTTP 요청과 함께 서버로 전송되지 않습니다.

주요 용도:

• 사용자 설정 저장: 예를 들어, 테마 설정, 언어 선택 등.
• 세션 간 데이터 유지: 페이지를 새로 고침하거나 브라우저를 종료한 후에도 데이터가 유지되어야 하는 경우.
• 대용량 데이터 저장: 쿠키보다 더 많은 데이터를 저장할 수 있습니다.

로컬 스토리지 예시:

// 데이터 저장
localStorage.setItem('username', 'JohnDoe');

// 데이터 읽기
let username = localStorage.getItem('username');
console.log(username); // "JohnDoe"

// 데이터 삭제
localStorage.removeItem('username');

// 모든 데이터 삭제
localStorage.clear();

3. 세션 스토리지 (SessionStorage)

세션 스토리지는 세션 단위로 데이터를 저장합니다. 즉, 브라우저 탭이 열린 동안만 유지되며, 탭을 닫으면 데이터가 삭제됩니다.

주요 특징:

• 세션 단위 저장: 데이터는 브라우저 탭을 닫을 때까지 유지됩니다. 새 탭을 열면 데이터가 공유되지 않습니다.
• 용량: 로컬 스토리지와 비슷하게 5MB~10MB의 용량을 제공합니다.
• 서버와의 상호작용 없음: 세션 스토리지도 서버와 상호작용하지 않으며, 데이터는 서버로 전송되지 않습니다.

주요 용도:

• 세션 데이터 저장: 페이지 간에 임시 데이터를 저장하는 데 사용됩니다. 예를 들어, 로그인 후 페이지를 새로 고침해도 세션이 유지되도록 할 수 있습니다.
• 한 탭에만 적용: 한 탭에서만 필요한 데이터를 저장하고, 다른 탭에서는 서로 독립적인 데이터를 사용할 때 유용합니다.

세션 스토리지 예시:

// 데이터 저장
sessionStorage.setItem('sessionId', 'abc123');

// 데이터 읽기
let sessionId = sessionStorage.getItem('sessionId');
console.log(sessionId); // "abc123"

// 데이터 삭제
sessionStorage.removeItem('sessionId');

// 모든 데이터 삭제
sessionStorage.clear();

---

쿠키 vs 로컬 스토리지 vs 세션 스토리지 비교

특징		쿠키 (Cookie)	로컬 스토리지 (LocalStorage)	세션 스토리지 (SessionStorage)
데이터 유지 기간		만료 날짜 설정 가능 (영구적 또는 세션 기반)	브라우저를 종료해도 데이터 유지	브라우저 탭이 닫히면 삭제
데이터 크기 제한		약 4KB	약 5MB ~ 10MB	약 5MB ~ 10MB
서버와의 상호작용		자동 전송: 요청 시마다 서버로 전송됨	서버와 상호작용 없음	서버와 상호작용 없음
브라우저 탭 간 데이터 공유		모든 탭에서 공유	동일 도메인 내에서 공유	같은 도메인 내에서 각 탭에 독립적
주요 용도		세션 관리, 사용자 인증, 트래킹	사용자 설정, 대용량 데이터 저장	세션 데이터, 페이지 간 임시 데이터 저장

---

언제 각각 사용해야 할까요?

• 쿠키:
  • 서버와의 상호작용이 필요할 때 사용 (예: 사용자 인증 정보).
  • 세션 관리 및 트래킹 기능이 필요한 경우 사용.
  • 소량의 데이터를 저장하고 서버와 함께 처리할 때 적합.
• 로컬 스토리지:
  • 영구적인 데이터 저장이 필요한 경우 사용 (브라우저를 닫아도 유지).
  • 세션 간 상태 유지가 필요한 경우 사용 (예: 사용자 설정, 테마).
  • 서버와의 상호작용이 필요 없는 경우.
• 세션 스토리지:
  • 한 세션 동안만 필요한 데이터를 저장할 때 사용 (예: 로그인 후 세션 상태 유지).
  • 브라우저 탭마다 독립적인 데이터가 필요한 경우 사용.

---

결론

• 쿠키는 서버와의 상호작용이 필요하고, 세션 관리나 사용자 인증에 유용합니다.
• 로컬 스토리지는 데이터를 영구적으로 저장하고, 세션 간 상태 유지가 필요할 때 사용합니다.
• 세션 스토리지는 세션 단위로 데이터를 저장하며, 탭을 닫으면 삭제되는 데이터 저장에 적합합니다.

---

쿠키와 로컬 스토리지의 명확한 차이점

쿠키와 로컬스토리지는 역할이 비슷합니다. 둘 다 모든 탭에서 사용 가능하고, 클라이언트(브라우저)에 저장됩니다.

두 웹 저장소의 가장 큰 차이점은 서버와 통신을 하냐/안하냐입니다.

쿠키는 서버와 클라이언트가 서로 통신(교환)하지만, 로컬 스토리지는 서버와 통신을 하지 않으며 클라이언트측에서만 저장되어 사용됩니다.

따라서 클라이언트쪽에서 빈번하게 데이터를 변화시켜 저장한 것을 서버측에서도 같이 사용하여 컨트롤러쪽에서 사용하려면 쿠키를 이용하는 것이 좋습니다. 

※ 세션ID로 로그인 상태 유지할 땐 세션+쿠키를 함께 사용합니다. 쿠키도 서버와 통신이 가능한 공통점이 있지만, 민감한 정보이기 때문에 쿠키만 사용하지 않고 서버측에도 저장하는 세션을 함께 사용합니다. 따라서 민감한 정보가 아닌데 서버와 통신해야 하는 데이터라면, 쿠키에 저장하여 소통하면 됩니다.