[JavaScript] 로컬 스토리지(Local Stroage), 세션 스토리지(Session Stroage), 쿠키(Cookie)

 

로컬 스토리지(Local Stroage), 세션 스토리지(Session Stroage), 쿠키(Cookie)는 모두 웹 브라우저에서 데이터를 저장하는 데 사용되는 브라우저 저장소이다. 이들은 모두 클라이언트 측에서 데이터를 저장하고 관리할 수 있으며, 서버와의 통신 없이도 정보를 보존할 수 있다. 

 

각각의 목적과 사용 방법을 알아보자

 

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

• 로컬 스토리지는 영구적으로 데이터를 저장하며, 브라우저를 종료해도 데이터가 유지된다.
• 주로 영구적인 사용자 환경 설정, 로그인 정보 등을 저장하는 데 사용된다.
• 사용자가 명시적으로 삭제하지 않는 한 데이터는 계속 유지된다.
• 일반적으로 5MB ~ 10MB의 용량을 가지고 있다. (도메인 당)

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

// 데이터 가져오기
const data = localStorage.getItem("key");
console.log(data); // 출력: value

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

 

2. 세션 스토리지 (Session Stroage)

• 세션 스토리지는 브라우저의 탭 또는 창 간의 데이터를 공유하지 않으며, 세션 단위로 데이터를 저장한다.
• 주로 현재 세션 동안 유지되어야 하는 데이터를 저장하는 데 사용된다. (브라우저 탭 종료시 데이터 소멸)
• 일반적으로 5MB ~ 10MB의 용량을 가지고 있다.

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

// 데이터 가져오기
const data = sessionStorage.getItem("key");
console.log(data); // 출력: value

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

 

3. 쿠키 (Cookie)

• 쿠키는 이름-값 쌍의 작은 용량의 텍스트 파일로, 서버가 클라이언트의 웹 브라우저에 저장한다.
  (클라이언트에서도 생성 가능)
• 쿠키는 설정된 만료일까지 유효하며, 만료일이 지나면 자동으로 삭제되거나 사용자에 의해 삭제될 수 있다
• 쿠키는 개별 쿠기당 4KB의 용량 제한이 있으며, 도메인당 저장할 수 있는 쿠키 수에도 제한이 있다. 일반적으로 총 20개 정도의 쿠키를 저장할 수 있다.

// 쿠키 생성
const setCookie = (name, value, days) => {
    let expires = '';
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
        expires = `; expires=${date.toUTCString()}`;
    }
    document.cookie = `${name}=${value || ''}${expires}; path=/`;
};

setCookie('ket', 'value', 1);

// 쿠키 가져오기
const getCookie = (name) => {
    let matches = document.cookie.match(
        new RegExp('(?:^|; )' + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + '=([^;]*)')
    );
    console.log()
    return matches ? decodeURIComponent(matches[1]) : undefined;
};

//만료 기간을 음수로 설정하여 쿠키를 삭제
function deleteCookie(name) {
    setCookie(name, "", {
      'max-age': -1
    })
  }