LocalStorage, SessionStorage, Cookie 비교

웹 애플리케이션 개발 시 사용자의 브라우저에 데이터를 저장하거나 사용자의 상태를 유지해야 할 때가 있습니다.

이를 위해 사용할 수 있는 방법은 LocalStorage, SessionStorage, Cookie가 있습니다.

모두 클라이언트 상에서 key/value 쌍으로 데이터를 저장하며, 저장된 값은 반드시 문자열이어야 합니다.

또한, 동일 출처 정책(Same-Origin Policy, SOP)을 따르기 때문에 세 기술 모두 다른 도메인에서의 접근은 허용되지 않습니다.

그러나 이들의 생성자, 지속시간, 용량, 서버와의 통신, 취약점 측면에서 차이가 있습니다.

LocalStorage, SessionStorage, Cookie의 차이점

예시를 통한 차이점

• Cookie: 로그인 상태 유지 같은 경우 Cookie를 사용할 수 있습니다. 사용자가 웹사이트에 로그인할 때 서버는 응답과 함께 Set-Cookie 헤더를 보내 사용자의 브라우저에 쿠키를 저장합니다. 이후 사용자가 다른 요청을 할 때마다 브라우저는 자동으로 해당 쿠키를 요청에 포함시켜 서버에 전송합니다. 이를 통해 서버는 사용자가 이미 로그인했음을 인식할 수 있습니다.

• SessionStorage: 온라인 시험이나 설문조사 등에서 사용자가 데이터를 입력하다가 페이지를 실수로 새로 고침하거나 닫아버린 경우, 입력했던 데이터를 유지하고 싶을 때 SessionStorage를 사용할 수 있습니다. 이 경우, 사용자의 데이터는 브라우저의 탭이나 창을 닫을 때까지만 유지됩니다.

• LocalStorage: 사용자가 웹사이트에서 어떤 테마를 선택했을 때, 이 선택을 기억하고 싶다면 LocalStorage를 사용할 수 있습니다. 사용자가 테마를 선택하면 해당 정보를 LocalStorage에 저장해 두고, 사용자가 웹사이트를 재방문할 때 저장된 정보를 기반으로 선택된 테마를 활성화합니다. 이 정보는 사용자가 명시적으로 삭제하지 않는 한 브라우저에 계속 저장됩니다.

이러한 차이점들을 이해하고 적절하게 활용한다면 보다 효율적으로 사용자의 데이터를 저장하고 관리할 수 있습니다. 각각의 방법이 가지는 특성을 잘 이해하고 적절한 상황에 맞게 선택하는 것이 중요합니다.

쿠키(Cookie)와 세션(Session)의 차이점

웹 개발을 하다 보면 사용자의 상태를 유지하는 여러 방법 중 쿠키(Cookie)와 세션(Session)이 자주 언급됩니다. 이 두 기술은 웹에서 사용자를 식별하고 사용자의 상태를 관리하는 핵심적인 역할을 하지만, 구체적인 동작 방식과 사용 목적에서 차이가 있습니다.

쿠키(Cookie)

쿠키는 클라이언트(사용자의 웹 브라우저)에 텍스트 형태로 저장되는 작은 데이터 조각입니다. 웹 서버는 HTTP 헤더를 통해 클라이언트에게 쿠키를 전송할 수 있으며, 일단 클라이언트에 저장된 쿠키는 후속 요청에서 웹 서버로 다시 전송됩니다. 이를 통해 서버는 사용자를 식별하고 상태 정보를 유지할 수 있습니다.

쿠키 사용 방법 (JavaScript)

// 쿠키 생성
// 쿠키에 'username'이라는 이름으로 'John Doe'라는 값을 저장합니다.
// 쿠키의 만료 기간을 7일로 설정합니다.
const d = new Date();
d.setTime(d.getTime() + 7 * 24 * 60 * 60 * 1000); // 7 days in milliseconds
const expires = "expires=" + d.toUTCString();
document.cookie = "username=John Doe;" + expires + ";path=/";

// 쿠키 읽기
function getCookie(name) {
  const nameEQ = name + "=";
  const ca = document.cookie.split(";");
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) === " ") c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

console.log(getCookie("username")); // 'John Doe'를 출력, 해당 쿠키가 없다면 null을 반환

// 쿠키 삭제
function deleteCookie(name) {
  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
}

deleteCookie("username"); // 'username' 쿠키를 삭제

세션(Session)

세션은 서버에서 관리되는 사용자의 상태 정보입니다.

사용자가 웹 애플리케이션에 접속할 때, 고유한 세션 ID가 생성되고, 이 ID는 사용자의 브라우저와 서버 사이에 쿠키 형태로 주고받으며 사용됩니다.

세션 데이터는 서버의 메모리나 데이터베이스에 저장될 수 있으며, 사용자의 민감한 정보를 보다 안전하게 관리할 수 있습니다.

세션 사용 방법 (JavaScript)

클라이언트 측에서는 쿠키나 웹 스토리지(localStorage, sessionStorage)를 사용하여 유사한 방식으로 사용자의 세션 정보를 관리할 수 있습니다.

// 세션 생성
// 세션 저장소에 사용자 이름 저장하기
sessionStorage.setItem("username", "John Doe");

// 세션 읽기-불러오기
// 세션 저장소에서 사용자 이름 읽기
const userName = sessionStorage.getItem("username");
console.log(userName); // 'John Doe' 출력

// 세션 삭제
// 세션 저장소에서 특정 데이터 삭제하기
sessionStorage.removeItem("username");

// 모든 세션 데이터 삭제하기
sessionStorage.clear();

인증 방식으로서의 쿠키와 세션의 차이점

쿠키와 세션은 각각의 장단점이 있으며, 웹 애플리케이션의 요구사항에 따라 적절하게 선택하여 사용해야 합니다. 단순한 사용자 선호도 저장은 쿠키를 사용하고, 로그인 세션 관리와 같은 보안이 중요한 정보는 세션을 사용하는 것이 일반적입니다. LocalStorage와 SessionStorage는 비교적 간단한 데이터 저장에 유용하며, 이를 잘 활용하여 보다 효율적인 웹 애플리케이션을 개발할 수 있습니다.