[javascript] 쿠키와 로컬스토리지

쿠키와 로컬스토리지는 웹 애플리케이션에서 데이터를 저장하기 위해 사용되는 두 가지 방법입니다. 이들은 클라이언트 측에 데이터를 저장하고 검색하는 데 사용됩니다. 하지만 쿠키와 로컬스토리지는 목적과 사용법에 따라 다르게 사용됩니다.

쿠키 (Cookies)

쿠키는 웹 서버가 사용자의 컴퓨터에 저장하는 작은 데이터 조각입니다. 쿠키는 클라이언트의 상태를 추적하고 정보를 유지하는 데 사용됩니다. 예를 들어, 로그인 시스템에서는 쿠키를 사용하여 사용자가 로그인되어 있는지 여부를 확인하고 그에 따라 작업을 수행합니다.

쿠키는 브라우저에 의해 관리되며, 만료 기간을 설정할 수 있습니다. 만료 기간이 지나면 브라우저는 해당 쿠키를 자동으로 삭제합니다. 쿠키는 도메인, 경로 및 보안 설정과 같은 추가 메타데이터를 포함할 수 있습니다. 하지만 쿠키는 저장할 수 있는 데이터의 양에 제한이 있고, 요청마다 쿠키가 전송되기 때문에 대규모 데이터 저장에는 적합하지 않을 수 있습니다.

쿠키의 생성 및 사용 예시:

// 쿠키 생성
document.cookie = "key=value; expires=Thu, 31 Dec 2022 23:59:59 UTC; path=/";

// 쿠키 읽기
var cookieValue = document.cookie;

로컬스토리지 (Local Storage)

로컬스토리지는 쿠키와 비슷하지만 좀 더 강력하고 유용한 기능을 제공합니다. 로컬스토리지는 클라이언트의 웹 브라우저에 데이터를 저장하는 데 사용됩니다. 로컬스토리지는 웹 애플리케이션의 세션을 유지하거나 중요한 정보를 저장하는 데 유용합니다.

로컬스토리지는 쿠키와 달리 만료 기간이 없습니다. 데이터는 브라우저를 종료해도 계속해서 유지됩니다. 로컬스토리지는 브라우저의 localStorage 객체를 통해 액세스할 수 있습니다. 로컬스토리지는 대량의 데이터를 저장할 수 있으며, 서버와 통신하지 않고도 데이터를 액세스할 수 있으므로 속도 측면에서 이점이 있습니다.

로컬스토리지의 생성 및 사용 예시:

// 로컬스토리지에 데이터 저장
localStorage.setItem("key", "value");

// 로컬스토리지에서 데이터 읽기
var value = localStorage.getItem("key");

// 로컬스토리지에서 데이터 삭제
localStorage.removeItem("key");

결론

쿠키와 로컬스토리지는 웹 애플리케이션에서 데이터를 저장하기 위해 사용되는 두 가지 방법입니다. 쿠키는 작은 데이터 조각으로 브라우저에 저장되며, 만료 기간을 설정할 수 있습니다. 로컬스토리지는 쿠키와 달리 데이터를 영구적으로 유지하며 대용량 데이터 저장과 빠른 데이터 액세스에 유용합니다. 개발자는 쿠키와 로컬스토리지의 특성과 사용법을 이해하여 적절하게 활용할 수 있어야 합니다.

참고 자료