로컬스토리지, 세션스토리지, 쿠키에 대한 100점짜리 답변?

로컬스토리지, 세션스토리지, 쿠키에 대한 100점짜리 설명

웹 애플리케이션에서 데이터를 클라이언트 측에 저장하는 방식에는 여러 가지가 있습니다.

주요 방식으로는 로컬스토리지(LocalStorage), 세션스토리지(SessionStorage), 쿠키(Cookies)가 있습니다.

이들 각각은 저장 용량, 유효 기간, 보안 및 사용 사례에 따라 다르게 사용됩니다.

 

 

 

1. 로컬스토리지 (LocalStorage)

로컬스토리지는 웹 브라우저에 데이터를 영구적으로 저장하는 방법입니다.

데이터는 브라우저가 닫히거나 컴퓨터가 재부팅된 후에도 유지됩니다.

 

특징

• 영구 저장: 사용자가 명시적으로 삭제하지 않는 한 데이터는 유지됩니다.
• 용량: 대개 5MB 이상 (브라우저마다 차이가 있음).
• 범위: 동일한 출처(origin) 내에서만 접근 가능.
• 데이터 타입: 문자열 형태로 저장됨 (JSON.stringify와 JSON.parse를 사용해 객체를 저장할 수 있음)

 

사용이유

• 영구성: 사용자가 브라우저를 닫더라도 정보를 유지할 필요가 있을 때 사용한다. 예를 들어, 웹 애플리케이션의 테마 설정이나 사용자의 선호도 같은 것들이 여기에 해당한다.
• 클라이언트 측 저장: 서버에 부담을 주지 않고 클라이언트 측에서 데이터를 관리하고 싶을 때 유용하다.
• 대용량 저장: 쿠키보다 훨씬 많은 데이터를 저장할 수 있다는 장점이 있다.

 

예시

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

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

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

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

 

 

 

 

2. 세션스토리지 (SessionStorage)

세션스토리지는 웹 브라우저의 세션 동안 데이터를 저장합니다.

세션이 끝나면(브라우저 탭 또는 창을 닫으면) 데이터는 삭제됩니다.

 

 

특징

• 세션 한정 저장: 브라우저 탭이나 창이 닫히면 데이터가 삭제됩니다.
• 용량: 대개 5MB 이상 (브라우저마다 차이가 있음).
• 범위: 동일한 출처(origin) 내에서만 접근 가능.
• 데이터 타입: 문자열 형태로 저장됨 (JSON.stringify와 JSON.parse를 사용해 객체를 저장할 수 있음).

 

사용이유

• 탭 또는 창 단위의 생명주기: 사용자가 웹 애플리케이션에서 단기간 동안 작업하는 정보를 저장해야 할 때 적합하다. 예를 들어, 양식 작성 중 임시 정보 저장이나 페이지 간의 데이터 전달 등에 사용된다.
• 보안: 세션 저장소는 탭이 닫히면 사라지므로, 민감한 정보를 저장할 때 쿠키보다 안전할 수 있다.

 

예시

// 데이터 저장
sessionStorage.setItem('username', 'JohnDoe');

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

// 데이터 삭제
sessionStorage.removeItem('username');

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

 

 

 

 

3. 쿠키 (Cookies)

쿠키는 웹 브라우저와 서버 간에 데이터를 교환하기 위해 사용되는 작은 데이터 파일입니다.

주로 세션 관리, 사용자 인증, 사용자 설정 저장 등에 사용됩니다.

 

 

특징

• 유효 기간 설정: 만료일을 설정할 수 있어 영구 저장 가능. 만료일을 설정하지 않으면 세션 쿠키가 됨 (브라우저 닫힐 때 삭제).
• 용량: 개당 최대 4KB, 도메인당 최대 20개.
• 범위: 도메인 및 경로 설정 가능. 하위 도메인에 대해 접근 권한 설정 가능.
• 데이터 타입: 문자열 형태로 저장됨.
• 보안: Secure 플래그를 사용해 HTTPS 연결에서만 전송할 수 있음. HttpOnly 플래그를 사용해 JavaScript에서 접근을 막을 수 있음.

 

사용이유

• 서버와 클라이언트 간의 통신: 쿠키는 HTTP 요청과 함께 자동으로 서버로 전송되므로, 사용자 인증 토큰과 같은 정보를 관리하는 데 적합하다.
• 만료 기간 설정: 쿠키는 만료 날짜를 설정할 수 있어 일정 기간 후 자동으로 삭제되게 할 수 있다. 이는 로그인 상태 유지 등에 유용하다.
• 동일 출처 정책 제한: 쿠키는 같은 도메인과 프로토콜 내에서만 접근이 허용되므로, 보안 측면에서 장점을 가진다.

 

보안

• Secure 플래그
  • 쿠키에 Secure 플래그를 설정하면 HTTPS를 통해서만 쿠키가 전송된다.
  • 쿠키가 암호화된 연결을 통해만 서버와 클라이언트 간에 교환되도록 함으로써, 중간자 공격(Man-in-the-Middle Attack)에 의한 데이터 유출을 방지
  • 특히 로그인 세션 정보와 같은 민감한 데이터를 다룰 때 매우 중요합니다.
  • HTTPS가 아닌 연결에서는 Secure 플래그가 설정된 쿠키가 전송되지 않습니다.
• HttpOnly 플래그
  • JavaScript를 통한 쿠키의 접근을 방지하기 위해 HttpOnly 플래그를 사용할 수 있다. 이는 XSS 공격으로부터 쿠키를 보호한다.
  • 쿠키를 HTTP(S) 요청을 통해서만 서버로 전송되도록 제한
  • JavaScript와 같은 클라이언트 사이드 스크립트를 통한 접근을 차단합니다. (클라이언트에서 접근 차단)
  • 이는 크로스 사이트 스크립팅(XSS) 공격으로부터 사용자의 쿠키를 보호하는 데 도움을 줍니다.
  • 사용자의 세션 쿠키가 악의적인 스크립트에 의해 탈취되는 것을 방지하므로, 로그인 정보와 같은 민감한 데이터를 보호하는 데 필수적입니다.
• SameSite 플래그
  • CSRF 공격을 방지하기 위해 SameSite 플래그를 설정할 수 있다.
  • 쿠키가 크로스 사이트 요청과 함께 전송되는 것을 제한합니다.
  • 이 플래그는 Strict, Lax, None의 세 가지 설정을 지원합니다.
    • Strict: 쿠키는 동일한 도메인의 요청에서만 전송됩니다. 사용자가 링크를 클릭하여 다른 사이트로 이동하는 경우에도 쿠키를 전송하지 않습니다.
    • Lax: 같은 사이트에서의 요청에 대해서는 쿠키를 전송하고, 다른 사이트에서 오는 일부 안전한 요청(예: 링크 클릭)에 대해서만 쿠키를 허용합니다.
    • None: 모든 크로스 사이트 요청에 대해 쿠키를 전송할 수 있습니다. 하지만 Secure 플래그와 함께 사용해야 합니다.

 

예시

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

// 쿠키 가져오기
const getCookie = (name) => {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
};

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

 

 

 

 

비교

	로컬 스토리지	세션 스토리지	쿠키
유효 기간	영구적	세션이 끝날 때까지	설정 가능
저장 용량	대개 5MB - 10MB	대개 5MB  - 10MB	개당 최대 4KB
범위	동일 출처	동일 출처	도메인 및 경로 설정 가능
데이터 타입	문자열	문자열	문자열
보안	JS에서 접근 가능	JS에서 접근 가능	Secure 및 HttpOnly 플래그 사용 가능
사용처	클라이언트	클라이언트	클라이언트와 서버가 상태 주고받을 때

 

 

 

 

 

사용 사례

• 로컬스토리지: 사용자 설정, 테마, 사용자 기본값 등 장기적으로 저장할 필요가 있는 데이터를 저장하는 데 적합합니다.
• 세션스토리지: 쇼핑 카트, 현재 페이지 상태 등 세션 동안만 유지되어야 하는 데이터를 저장하는 데 적합합니다.
• 쿠키: 사용자 인증 정보, 세션 식별자, 서버와 클라이언트 간의 데이터를 교환해야 하는 경우에 적합합니다.

이와 같이 로컬스토리지, 세션스토리지, 쿠키의 특징과 사용 사례를 명확하게 이해하고 활용하면 웹 애플리케이션 개발에 큰 도움이 될 것입니다.

 

 

 

 

 

 

참조:

https://velog.io/@lobinb797/Day70-HTTP-Cookie#local-storage

[Day70] 로컬 스토리지, 세션 스토리지, 쿠키