Local Storage , Session Storage, Cookie

1. Local Storage

• 특징: 브라우저에 데이터를 영구적으로 저장하며, 사용자가 브라우저를 닫거나 컴퓨터를 재부팅해도 데이터가 유지됩니다.
• 용도: 사용자 설정이나 상태와 같은 장기적인 정보 저장에 적합합니다.
• 저장 용량: 약 5MB에서 10MB 정도로, 세 가지 중 가장 큽니다.
• 접근 방식: 자바스크립트를 통해 localStorage 객체를 사용하여 접근합니다.
• 보안: 서버에 전송되지 않으며, 클라이언트 측에서만 접근 가능하므로 비교적 안전하지만, 브라우저 보안 설정에 따라 접근이 차단될 수 있습니다.

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

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

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

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

2. Session Storage

• 특징: 사용자가 현재 브라우저 탭을 유지하는 동안만 데이터를 저장합니다. 새 탭을 열거나 브라우저를 닫으면 데이터가 사라집니다.
• 용도: 일회성 데이터나 짧은 기간 동안 유지해야 하는 정보 저장에 적합합니다.
• 저장 용량: Local Storage와 비슷하지만, 보통 약 5MB로 제한됩니다.
• 접근 방식: 자바스크립트의 sessionStorage 객체를 통해 접근합니다.
• 보안: 역시 클라이언트 측에서만 접근 가능하며, 같은 브라우저 탭에서만 데이터가 유지되므로 보안 수준은 높습니다.

// 데이터 저장
sessionStorage.setItem("sessionData", "temporary data");

// 데이터 가져오기
const sessionData = sessionStorage.getItem("sessionData");

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

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

3. Cookies

• 특징: 서버와 클라이언트 간에 데이터를 주고받을 때 사용되며, 서버에 특정 데이터가 필요한 경우 데이터를 저장하고 활용할 수 있습니다.
• 용도: 사용자 인증(로그인 상태 유지), 사용자 트래킹, 웹사이트 방문 정보 저장 등에 주로 사용됩니다.
• 저장 용량: 최대 약 4KB로, 비교적 작은 데이터를 저장하기에 적합합니다.
• 설정 방식: 클라이언트나 서버 측에서 HTTP 헤더에 쿠키를 추가하거나, 자바스크립트로 document.cookie를 사용하여 설정할 수 있습니다.
• 보안: 민감한 데이터가 포함될 수 있어 보안에 유의해야 합니다. Secure, HttpOnly, SameSite 같은 속성으로 보안 설정을 강화할 수 있습니다.

// 쿠키 생성
document.cookie = "username=chatgpt; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// 쿠키 가져오기
const cookies = document.cookie;

// 쿠키 삭제 (만료일을 과거로 설정)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

비교 요약

특징	Local Storage	Session Storage	Cookies
저장 기간	영구적	브라우저 탭이 열려있는 동안만 유지	설정된 만료 기간까지 (없으면 세션 쿠키)
저장 용량	약 5~10MB	약 5MB	약 4KB
데이터 접근	클라이언트 측에서만 자바스크립트를 통해 접근	클라이언트 측에서만 자바스크립트를 통해 접근	서버와 클라이언트 모두 접근 가능
사용 목적	장기적인 사용자 데이터 유지	세션 단위의 일시적인 데이터 유지	서버와의 통신에서 필요한 작은 데이터
보안	서버로 전송되지 않음	서버로 전송되지 않음	HTTPS 및 HttpOnly, SameSite 설정 가능

웹 개발 시 Local Storage와 Session Storage는 서버와의 불필요한 데이터 전송을 줄이는 데 유용하며, Cookies는 서버 측에 필요한 정보를 저장하는 데 유용합니다. 각 방식의 특성을 이해하고 상황에 맞게 선택하는 것이 중요합니다.