브라우저 저장소 이해하기

웹 개발을 하다 보면 클라이언트 측에서 데이터를 저장하고 관리해야 할 때가 있습니다. 이때 사용하는 브라우저 저장소에는 localStorage, sessionStorage, Cookie 등이 있습니다. 이번 글에서는 각 저장소의 특징과 주요 함수들을 살펴보겠습니다.

1. localStorage

localStorage는 웹 페이지의 세션이 종료되어도 데이터가 지속적으로 저장됩니다. 데이터는 문자열 형태로만 저장되며, 최대 5MB의 데이터를 저장할 수 있습니다.

주요 함수

1. setItem(key, value): 데이터를 저장합니다.

localStorage.setItem('username', 'JohnDoe');

2. getItem(key): 저장된 데이터를 가져옵니다.

const username = localStorage.getItem('username');

3. removeItem(key): 특정 데이터를 삭제합니다.

localStorage.removeItem('username');

4. clear(): 모든 데이터를 삭제합니다.

localStorage.clear();

2. sessionStorage

sessionStorage는 웹 페이지의 세션이 유지되는 동안만 데이터를 저장합니다. 브라우저를 닫으면 데이터가 삭제됩니다.

주요 함수

1. setItem(key, value): 데이터를 저장합니다.

sessionStorage.setItem('sessionID', '123456');

2. getItem(key): 저장된 데이터를 가져옵니다.

const sessionID = sessionStorage.getItem('sessionID');

3. removeItem(key): 특정 데이터를 삭제합니다.

sessionStorage.removeItem('sessionID');

4. clear(): 모든 데이터를 삭제합니다.

sessionStorage.clear();

3. Cookie

쿠키는 웹 서버가 사용자의 브라우저에 저장하는 작은 데이터 파일입니다. 주로 로그인 상태 유지, 사용자 설정 저장, 세션 관리 등에 사용됩니다. 쿠키는 HTTP 요청 시 서버로 전달되어 상태 정보를 유지하는 데 도움을 줍니다.

주요 함수 설정 예시

1. 쿠키 설정하기
쿠키를 설정하려면 document.cookie 속성을 사용합니다. 예를 들어, 사용자 이름을 저장하는 쿠키를 설정해보겠습니다. 아래 함수는 쿠키 이름, 값, 만료일을 인자로 받아 쿠키를 설정합니다.

function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        let date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

2. 쿠키 읽기
저장된 쿠키를 읽으려면 document.cookie를 사용하여 쿠키 문자열을 파싱해야 합니다. 아래 함수는 쿠키 이름을 인자로 받아 해당 쿠키의 값을 반환합니다.

function getCookie(name) {
    let nameEQ = name + "=";
    let ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

3. 쿠키 삭제
쿠키를 삭제하려면 만료일을 과거로 설정하면 됩니다. 이 함수는 쿠키 이름을 인자로 받아 해당 쿠키를 삭제합니다.

function eraseCookie(name) {
    document.cookie = name + '=; Max-Age=-99999999;';
}

쿠키 사용 시 주의사항

1. 보안: 쿠키는 민감한 정보를 저장하는 데 적합하지 않습니다. 중요한 데이터는 서버 측에서 관리하는 것이 좋습니다.
2. 크기 제한: 쿠키는 일반적으로 4KB 이하의 데이터를 저장할 수 있습니다.
3. 도메인 및 경로: 쿠키는 설정된 도메인과 경로에서만 접근할 수 있습니다.