브라우저 저장소 (쿠키, 로컬 스토리지, 세션 스토리지)

1. 쿠키 (Cookies)

• 특징: 클라이언트와 서버 간의 작은 데이터 조각을 저장한다
• 크기 제한: 약 4KB (상대적으로 작다)
• 유효 기간: 만료 날짜를 설정할 수 있으며, 기본적으로 브라우저를 닫아도 유지된다
• 서버 통신: HTTP 요청 시마다 서버에 자동으로 전송되므로, 보안 및 성능에 주의해야 한다
• 용도: 세션 관리, 사용자 설정 유지 등

• // 쿠키 설정 (이름, 값, 만료일, 경로 등)
  document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
  
  // 쿠키 가져오기
  function getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
  }
  
  console.log(getCookie('username')); // 출력: JohnDoe
  
  // 쿠키 삭제 (만료일을 과거로 설정)
  document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

2. 로컬 스토리지 (Local Storage)

• 특징: 웹 페이지의 데이터를 영구적으로 클라이언트에 저장.
  브라우저를 닫아도 데이터가 사라지지 않는다
• 크기 제한: 약 5~10MB로 쿠키보다 큰 데이터를 저장할 수 있다
• 유효 기간: 설정된 만료 시간이 없으며, 사용자가 직접 삭제하지 않는 한 계속 유지
• 서버 통신: 서버와 자동으로 통신하지 않으며, 클라이언트 측에서만 데이터를 저장하고 관리
• 용도: 사용자 설정, 애플리케이션 상태 저장 등

• // 데이터 저장
  localStorage.setItem('username', 'JaneDoe');
  localStorage.setItem('age', '30');
  
  // 데이터 가져오기
  const username = localStorage.getItem('username');
  const age = localStorage.getItem('age');
  console.log(username); // 출력: JaneDoe
  console.log(age);      // 출력: 30
  
  // 데이터 삭제
  localStorage.removeItem('username');
  
  // 데이터 다시 가져오기 (삭제 후)
  const deletedUsername = localStorage.getItem('username');
  console.log(deletedUsername); // 출력: null (삭제되었으므로)
  
  // 모든 데이터 삭제
  localStorage.clear();

3. 세션 스토리지 (Session Storage)

• 특징: 브라우저 세션 ( =브라우저 창이나 탭을 열고 있는) 동안만 데이터를 저장
  페이지를 새로고침해도 유지되지만, 브라우저를 닫으면 데이터가 사라진다
• 크기 제한: 로컬 스토리지와 유사한 크기 제한(약 5~10MB)
• 유효 기간: 브라우저 창이나 탭이 닫으면 자동으로 삭제된
• 서버 통신: 서버에 자동으로 전송되지 않으며, 클라이언트 측에서만 작동
• 용도: 페이지 세션 동안 임시 데이터 저장

• // 데이터 저장
  sessionStorage.setItem('username', 'JohnDoe');
  
  // 데이터 가져오기
  const username = sessionStorage.getItem('username');
  console.log(username); // 출력: JohnDoe
  
  // 데이터 삭제
  sessionStorage.removeItem('username');
  
  // 모든 데이터 삭제
  sessionStorage.clear();