[개발 지식] 로컬 스토리지 vs 쿠키

로컬 스토리지(Local Storage)와 쿠키(Cookies)는 웹 브라우저에서 클라이언트 측 데이터를 저장하는 두 가지 주요 방법이다.
각각의 특징과 차이점을 이해하면 웹 애플리케이션에서 어떤 저장 방식을 선택할지 결정하는 데 도움이 된다.

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

로컬 스토리지는 웹 브라우저에서 클라이언트 측 데이터를 저장할 수 있는 메커니즘으로, 다음과 같은 특징이 있다:

• 저장 용량: 브라우저마다 다르지만, 일반적으로 5MB에서 10MB까지 데이터를 저장할 수 있다.
• 만료 시간: 데이터는 명시적으로 삭제되거나 브라우저 캐시를 지우기 전까지 유지된다. 세션이나 만료 시간이 설정되지 않는다.
• 데이터 접근: 자바스크립트를 통해 클라이언트 측에서 쉽게 접근할 수 있다. localStorage 객체를 사용하여 데이터를 저장하고 읽을 수 있다.

// 데이터 저장
localStorage.setItem('key', 'value');

// 데이터 읽기
const value = localStorage.getItem('key');

// 데이터 삭제
localStorage.removeItem('key');

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

 

• 보안: 데이터는 클라이언트 측에 저장되며, 같은 도메인 내의 모든 페이지에서 접근할 수 있다. HTTPS를 사용할 경우 상대적으로 안전하다.
• 제한 사항: 서버와의 통신이 불가능하며, 브라우저가 저장소를 지원해야 한다.

 

2. 쿠키 (Cookies)

쿠키는 웹 브라우저가 서버와 클라이언트 간의 정보를 저장하고 교환하는 데 사용되는 메커니즘으로, 다음과 같은 특징이 있다:

• 저장 용량: 쿠키 하나당 약 4KB의 데이터 제한이 있다. 한 도메인에서 저장할 수 있는 쿠키의 수와 크기에 제한이 있다.
• 만료 시간: 쿠키는 만료 시간을 설정할 수 있으며, 만료 시간이 지나면 자동으로 삭제된다. 만료 시간을 설정하지 않으면 세션 쿠키로 저장된다.

// 쿠키 저장
document.cookie = "key=value; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// 쿠키 읽기
const cookies = document.cookie;

// 쿠키 삭제 (만료 시간으로 설정)
document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

 

• 데이터 접근: 쿠키는 클라이언트와 서버 간의 모든 요청에 자동으로 포함된다. 자바스크립트와 서버 측에서 접근할 수 있다.
• 보안: 쿠키는 HTTPS를 통해 전송할 수 있으며, Secure 및 HttpOnly 속성을 설정하여 보안을 강화할 수 있다. 그러나 쿠키는 전송 시 항상 포함되므로 데이터의 보안에 주의해야 한다.
• 제한 사항: 쿠키는 클라이언트와 서버 간의 모든 요청에 포함되므로 불필요한 데이터 전송을 초래할 수 있다.

요약

• 저장 용량: 로컬 스토리지가 쿠키보다 더 많은 데이터를 저장할 수 있다.
• 만료 시간: 로컬 스토리지는 명시적으로 삭제될 때까지 데이터가 유지되며, 쿠키는 만료 시간을 설정할 수 있다.
• 데이터 접근: 로컬 스토리지는 클라이언트 측에서만 접근 가능하지만, 쿠키는 서버와 클라이언트 모두 접근할 수 있다.
• 보안: 두 방법 모두 HTTPS를 통해 보안을 강화할 수 있지만, 쿠키는 전송 시 데이터가 포함되므로 주의가 필요하다.

로컬 스토리지와 쿠키는 각각 장단점이 있으며, 애플리케이션의 필요에 따라 적절한 방법을 선택하여 사용하는 것이 중요하다.