sessionStorage, localStorage 및 쿠키의 차이점

1.sessionStorage(임시 저장)

sessionStorage는 HTML5의 새로운 Web Storage API 중 하나로 브라우저에 키-값 쌍 데이터를 저장하는 데 사용됩니다.localStorage와 유사하지만 sessionStorage에 저장된 데이터는 세션이 종료되면 지워집니다.

sessionStorage는 다음과 같은 방법으로 사용할 수 있습니다.

• 데이터 저장:

sessionStorage.setItem('키', '값');

• 데이터 검색:

sessionStorage.getItem('키');

• 데이터 삭제:

sessionStorage.removeItem('키');

• 모든 데이터 지우기:

sessionStorage.clear();

sessionStorage는 문자열 유형 데이터만 저장할 수 있으므로 다른 유형의 데이터를 저장해야 하는 경우 먼저 문자열 유형으로 변환해야 합니다.

2. localStorage(영구 저장소)

localStorage는 HTML5의 새로운 Web Storage API 중 하나로 브라우저에 키-값 쌍 데이터를 저장하는 데 사용됩니다.sessionStorage와 유사하지만 localStorage에 저장된 데이터는 세션이 종료될 때 지워지지 않습니다.

localStorage는 다음과 같은 방법으로 사용할 수 있습니다.

• 데이터 저장:

localStorage.setItem('키', '값');

• 데이터 검색:

localStorage.getItem('키');

• 데이터 삭제:

localStorage.removeItem('키');

• 모든 데이터 지우기:

localStorage.clear();

localStorage는 문자열 유형 데이터만 저장할 수 있으므로 다른 유형의 데이터를 저장해야 하는 경우 먼저 문자열 유형으로 변환해야 합니다.

3. 쿠키

쿠키는 클라이언트 측에 데이터를 저장하는 메커니즘으로 document.cookie를 통해 읽고 설정할 수 있습니다.

쿠키의 주요 목적은 다음과 같습니다.

1. 세션 관리: 쿠키는 사용자의 로그인 상태 저장과 같은 사용자의 세션 상태를 관리하는 데 사용할 수 있습니다.

2. 개인화 설정: 쿠키는 이용자의 언어 기본 설정, 테마 기본 설정 등과 같은 이용자의 개인화 설정을 저장하는 데 사용될 수 있습니다.

3. 사용자 행동 추적: 쿠키는 사용자 검색 기록, 구매 기록 등과 같은 사용자 행동을 추적하는 데 사용할 수 있습니다.

쿠키의 크기 제한은 상대적으로 작고 일반적으로 몇 KB의 데이터만 저장할 수 있으며 쿠키의 저장 방법은 비교적 간단하고 변조하기 쉽기 때문에 민감한 정보를 저장하는 데 적합하지 않습니다. 민감한 정보를 저장해야 하는 경우 localStorage 또는 sessionStorage를 사용하는 것이 좋습니다.

차이점:

• 저장된 데이터의 수명 주기는 다릅니다. sessionStorage에 저장된 데이터는 세션이 종료될 때 지워지는 반면 localStorage에 저장된 데이터는 세션이 종료될 때 지워지지 않습니다.

• 데이터 저장 범위가 다릅니다. sessionStorage에 저장된 데이터는 현재 세션에서만 유효하고 localStorage에 저장된 데이터는 동일한 소스의 모든 창에서 공유됩니다.

• 저장된 데이터의 크기 제한이 다릅니다: sessionStorage와 localStorage의 크기 제한이 다릅니다.일반적으로 localStorage의 크기 제한이 sessionStorage보다 큽니다.