[JavaScript] 자바스크립트 복습 part14

JS 웹 스토리지 정리 (Cookies, LocalStorage, SessionStorage)

---

📌 1. Client-side Storage란?

• 웹 브라우저를 통해 사용자의 로컬 환경에 데이터를 저장하는 기술
• 서버와의 통신 없이 빠르고 효율적인 데이터 접근이 가능

---

📌 2. Client-side Storage의 특징

1. 퍼포먼스 개선: 서버 요청 최소화로 성능 향상
2. 오프라인 액세스: 네트워크 없이도 데이터 접근 가능
3. 사용자 경험 개선: 개인 설정 및 이전 상태 저장 가능

---

📌 3. 종류 및 특징 비교

🔹 1) Cookies

• ✅ 수명: expires 지정 가능 (기본은 브라우저 종료 시 삭제)
• ✅ 용량: 약 4KB
• ✅ 서버와 매 요청마다 전송됨
• ✅ 보안에 취약 (XSS, 탈취 우려)
• ✅ 사용 예: 로그인 세션, 사용자 추적

생성 예시

document.cookie = "username=lsa; path=/;";

만료 설정 예시

let date = new Date();
date.setTime(date.getTime() + (1 * 60 * 60 * 1000)); // 1시간
let expires = "expires=" + date.toUTCString();
document.cookie = "userEmail=qwe123;" + expires + "; path=/;";

쿠키 가져오기 함수

function getCookieValue(cookieName) {
  let cookies = document.cookie.split(';');
  for (let i = 0; i < cookies.length; i++) {
    let [name, value] = cookies[i].split('=');
    if (name.trim() === cookieName) return value || '';
  }
  return '';
}

쿠키 삭제

function deleteCookie(cookieName) {
  document.cookie = cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;";
}

---

🔹 2) LocalStorage

• ✅ 수명: 브라우저가 삭제되기 전까지 유지
• ✅ 용량: 약 5MB
• ✅ 서버로 전송되지 않음
• ✅ 사용 예: 대용량 데이터, 사용자 설정 저장

저장

localStorage.setItem('username', '이승아');
localStorage.setItem('userAge', 29);
localStorage.setItem('isStudent', false);
localStorage.setItem('userInfo', JSON.stringify({ name: '이도경', age: 31 }));

가져오기

let username = localStorage.getItem('username');
let userInfo = JSON.parse(localStorage.getItem('userInfo'));

삭제 및 초기화

localStorage.removeItem('userAge');
localStorage.clear(); // 전체 삭제

---

🔹 3) SessionStorage

• ✅ 수명: 브라우저 탭 종료 시 삭제
• ✅ 용량: 약 5MB
• ✅ 사용 예: 임시 정보 저장 (폼 데이터 등)

사용 예

sessionStorage.setItem('tempData', '123');
let temp = sessionStorage.getItem('tempData');
sessionStorage.removeItem('tempData');
sessionStorage.clear();

---

📌 요약

구분	사용 목적	대표 사용 예시
Cookies	서버와 지속적인 상태 유지 필요 시	로그인 인증 토큰 등
LocalStorage	장기 보존, 대용량, 사용자 설정 저장	다크 모드 설정, 테마, 대시보드 등
SessionStorage	세션 단위 임시 저장 필요 시	쇼핑몰 장바구니, 임시 입력 값

---

🚀 스토리지,쿠키 관리 정리!!