브라우저 Session Storage, Local Storage, Cookies(세션쿠키, 영구쿠키) 정리

브라우저 내에서 데이터를 저장하고 관리하는 다양한 방법이 있습니다. 여기서는 세션 저장소, 로컬 저장소, 쿠키, 세션 쿠키의 차이점을 설명하겠습니다.

1. 세션 저장소 (Session Storage)

유효 기간: 브라우저 세션이 종료될 때까지 유지됩니다. 브라우저 탭이나 창을 닫으면 데이터가 사라집니다.

용량 제한: 각 도메인별로 약 5MB.

접근성: 같은 도메인 내에서만 접근 가능합니다.

용도: 일시적인 데이터를 저장하는 데 적합합니다.

코드 예제:

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

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

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

2. 로컬 저장소 (Local Storage)

유효 기간: 데이터가 명시적으로 삭제될 때까지 영구적으로 유지됩니다.

용량 제한: 각 도메인별로 약 5~10MB.

접근성: 같은 도메인 내에서만 접근 가능합니다.

용도: 영구적인 데이터를 저장하는 데 적합합니다.

코드 예제:

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

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

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

3. 쿠키 (Cookies)

유효 기간: 만료 날짜를 설정할 수 있으며, 기본적으로 세션 종료 시까지 유지됩니다.

용량 제한: 각 쿠키당 최대 4KB.

접근성: 같은 도메인 내에서만 접근 가능하며, 서버와 클라이언트 모두에서 접근 가능합니다.

용도: 작은 크기의 데이터를 서버와 클라이언트 간에 교환하는 데 적합합니다.

코드 예제:

// 쿠키 저장 (만료 날짜 지정)
document.cookie = "key=value; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";

// 쿠키 읽기
function getCookie(name) {
  let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)

\\\/\+^])/g, '\\$1') + "=([^;]*)" )); return matches ? decodeURIComponent(matches[1]) : undefined; } const value = getCookie('key');

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

4. 세션 쿠키 (Session Cookies)

• 유효 기간: 브라우저 세션이 종료될 때까지 유지됩니다. 브라우저 탭이나 창을 닫으면 데이터가 사라집니다.
• 용량 제한: 각 쿠키당 최대 4KB.
• 접근성: 같은 도메인 내에서만 접근 가능하며, 서버와 클라이언트 모두에서 접근 가능합니다.
• 용도: 일시적인 데이터를 서버와 클라이언트 간에 교환하는 데 적합합니다.
• 코드 예제:

// 세션 쿠키 저장 (만료 날짜 미지정)
document.cookie = "key=value; path=/";

// 세션 쿠키 읽기
const value = getCookie('key');

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

요약

세션 저장소: 브라우저 탭 또는 창을 닫으면 데이터가 삭제됩니다.

로컬 저장소: 데이터가 영구적으로 유지됩니다.

(영구)쿠키: 만료 날짜를 설정할 수 있으며, 기본적으로 세션 종료 시까지 유지됩니다.

세션 쿠키: 브라우저 세션이 종료될 때까지 유지됩니다.

이 네 가지 저장 방식은 각각의 특성에 따라 적절한 상황에서 사용될 수 있습니다. 필요에 따라 올바른 저장 방식을 선택하여 사용하세요! 😊