웹에서 사용자 데이터를 저장하는 방법에는 쿠키, 로컬스토리지, 세션스토리지가 있다.

1. 쿠키

• 일시적으로 필요한 작은 데이터를 저장할 때 사용
• 주로 로그인 상태 유지, 사용자 인증 정보, 세션 식별자 등에 사용
• 민감한 데이터는 HttpOnly, Secure 속성 등을 사용해 보안 강화 필요
• 쿠키는 페이지가 아닌 주소(IP)별로 저장됨

중요한 정보는 JS가 아닌 백엔드에서 쿠키 생성 + 보안 설정(HttpOnly, Secure) 해야 안전하다.

1.1 브라우저를 꺼도 유지되는 쿠키 (영속 쿠키)

expires 속성을 설정하면 브라우저가 꺼져도 유지된다.

const setCookie = (name, value, exp) => {
  	let date = new Date();
  	date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000);
  	document.cookie = name + "=" + value + ";expires=" + date.toUTCString() + ";path=/;Secure=true;";
}
setCookie('test01', 'data01', 7);

속성	설명
expires	쿠키의 만료 시점을 설정함. 이걸 설정하지 않으면 브라우저를 닫을 때 쿠키가 삭제됨
Secure	이 속성이 붙은 쿠키는 HTTPS 연결에서만 전송됨
HttpOnly	이 속성이 있으면 쿠키는 JavaScript에서 접근 불가

1.2 브라우저를 끄면 삭제되는 쿠키 (세션 쿠키)

expires를 설정하지 않으면 브라우저가 꺼질 때 삭제된다.

const setCookie2 = (name, value) => {
  	var date = new Date();
  	document.cookie = name + "=" + value + ";path=/";
}
setCookie2('test02', 'data02');

1.3 쿠키 조회 함수

function getCookie(name) {
  	var value = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
  	return value ? value[2] : null;
}

let test01 = getCookie("test01");
console.log(test01); // "data01"

---

2. 로컬 스토리지

• 영구 저장소: 브라우저를 껐다 켜도 데이터 유지됨
• 도메인 단위로 저장되며, 서버와 무관하게 프론트엔드에서만 접근 가능
• 사용자 설정, 장바구니 정보, 테마 등에 주로 사용됨
• 보안 민감한 정보 저장 안함

// 저장
localStorage.test02 = 'data02';
localStorage.setItem("test03", "data03");

// 조회
console.log(localStorage.getItem("test02")); // "data02"

// 삭제
localStorage.removeItem("test02");

// 전체 삭제
localStorage.clear();

2.1 LocalStorage에 데이터 저장

2.2 다른 페이지에서도 확인 가능 (브라우저 꺼도 유지됨)

---

3. 세션 스토리지

• 브라우저 탭 단위의 임시 저장소
• 탭을 닫거나 새로고침하면 저장된 데이터는 자동 삭제됨
• 주로 일시적인 상태 저장에 사용 (예: 임시 폼 데이터, 필터 조건 등)
• 서버와는 무관하며, JavaScript에서만 접근 가능

// 저장
sessionStorage.test04 = "data04";
sessionStorage.setItem("test05", "data05");

// 조회
console.log(sessionStorage.getItem("test05")); // "data05"

// 삭제
sessionStorage.removeItem("test05");

// 전체 삭제
sessionStorage.clear();

3.1 SessionStorage에 데이터 저장

3.2 다른 페이지로 이동하면 확인 불가

---

4. 쿠키, 로컬스토리지, 세션스토리지 비교

항목	쿠키 (Cookie)	로컬스토리지 (LocalStorage)	세션스토리지 (SessionStorage)
용도	인증 정보, 로그인 상태 유지	사용자 설정, 영구 데이터 저장	임시 데이터, 탭 단위 정보 저장
만료 시점	직접 설정 (expires, max-age)	수동 삭제 전까지 유지	탭 종료 또는 새로고침 시 삭제
저장 용량 제한	약 4KB	약 5~10MB	약 5~10MB
HTTP 전송 여부	전송됨 (자동 포함됨)	전송되지 않음	전송되지 않음
접근 방법	JS & 서버 (HTTP Header)	JS only	JS only
보안 설정	HttpOnly, Secure 등 가능	보안 설정 불가 (암호화 X)	보안 설정 불가 (암호화 X)