로컬 스토리지(Local Storage), 세션 스토리지(Session Storage), 쿠키(Cookies)

 

현대의 웹 애플리케이션은 다양한 방식으로 데이터를 저장하고 관리합니다.

브라우저의 저장소 중에서 자주 사용하는 방식으로는 로컬 스토리지(Local Storage), 세션 스토리지(Session Storage), 쿠키(Cookies)가 있습니다.

---

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

로컬 스토리지는 브라우저에 데이터를 영구적으로 저장할 수 있는 공간입니다.

한 번 저장된 데이터는 사용자가 직접 삭제하지 않는 한 브라우저를 종료하거나 컴퓨터를 껐다 켜도 유지됩니다.

이는 사용자의 데이터를 장기적으로 유지해야 하는 경우에 유용합니다.

주요 메소드

• setItem(key, value): 데이터를 저장합니다.
• getItem(key): 저장된 데이터를 가져옵니다.
• removeItem(key): 특정 데이터를 삭제합니다.
• clear(): 모든 데이터를 삭제합니다.

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

// 데이터 가져오기
const username = localStorage.getItem("username");
console.log(username); // "JohnDoe"

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

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

 

 

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

세션 스토리지는 브라우저가 실행되는 동안만 유지되는 데이터 저장소입니다.

브라우저 탭이 닫히거나 페이지가 새로고침되지 않고 그대로 유지될 때까지 데이터를 저장하며, 브라우저를 종료하면 모든 데이터가 삭제됩니다.

임시 데이터 저장에 적합합니다.

주요 메소드

• setItem(key, value): 데이터를 저장합니다.
• getItem(key): 저장된 데이터를 가져옵니다.
• removeItem(key): 특정 데이터를 삭제합니다.
• clear(): 모든 데이터를 삭제합니다.

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

// 데이터 가져오기
const sessionId = sessionStorage.getItem("sessionId");
console.log(sessionId); // "abc123"

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

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

 

 

3. 쿠키(Cookies)

쿠키는 클라이언트와 서버 간에 데이터를 주고받기 위해 만들어진 저장소입니다.

쿠키는 로컬 및 세션 스토리지와 다르게 서버로 자동 전송되며, 사용자가 설정한 만료 기간이 지나면 자동으로 삭제됩니다.

쿠키는 보통 사용자 인증 정보나 간단한 설정 정보를 저장할 때 사용됩니다.

주요 속성

• name: 쿠키의 이름
• value: 쿠키의 값
• expires: 만료 날짜 (기본적으로 세션 만료 시 삭제)
• path: 쿠키의 경로
• secure: HTTPS 연결에서만 쿠키가 전송됨

// 쿠키 설정
document.cookie = "user=JohnDoe; expires=" + new Date(2024, 11, 1).toUTCString();

// 쿠키 가져오기
const getCookie = (name: string) => {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop()?.split(";").shift();
};
console.log(getCookie("user")); // "JohnDoe"

// 쿠키 삭제
document.cookie = "user=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

---

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

특성	로컬 스토리지	세션 스토리지	쿠키
지속성	영구적	브라우저 종료 시 삭제	만료 설정 가능
데이터 용량	비교적 큼	비교적 큼	제한적 (4KB 미만 권장)
서버 전송	아님	아님	요청 시 자동 전송
사용 사례	장기 데이터 유지	일시적 데이터	세션 유지, 인증 정보 저장