로컬 스토리지와 세션 스토리지

로컬스토리지

로컬 스토리지는 웹 브라우저에서 제공하는 기능으로, 사용자가 방문한 웹사이트가 데이터를 사용자의 브라우저에 저장할 수 있도록 해준다. 이 데이터는 브라우저를 닫거나 컴퓨터를 재시작해도 계속 유지되며, 특정 사이트에서만 접근할 수 있다. 로컬 스토리지는 쿠키와 비슷하지만, 차이점이 존재한다.

로컬 스토리지의 특징:

• 용량: 로컬 스토리지는 일반적으로 5MB에서 10MB 정도의 데이터를 저장할 수 있다. 이는 쿠키의 저장 용량(4KB)보다 훨씬 크다.
• 유지 기간: 로컬 스토리지에 저장된 데이터는 사용자가 직접 삭제하지 않는 한 브라우저에 무기한 저장된다. 쿠키는 만료 기간이 설정될 수 있다.
• 보안: 로컬 스토리지의 데이터는 해당 웹사이트의 도메인에서만 접근할 수 있다. 다른 웹사이트나 도메인에서는 접근할 수 없으므로 보안 측면에서 안전하다.

로컬 스토리지 사용 예제 코드

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

// 데이터 불러오기
let data = localStorage.getItem('key');
console.log(data); // 'value' 출력

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

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

로컬 스토리지 장단점

장점	단점
데이터를 영구적으로 저장할 수 있음	보안에 취약, 민감한 데이터 저장에 부적합
브라우저를 닫아도 데이터가 유지됨	여러 디바이스에서 동기화가 어려움
큰 용량(5-10MB)을 저장할 수 있음	오래된 브라우저에서 지원되지 않을 수 있음

세션 스토리지

세션 스토리지는 로컬과 다르게 웹 브라우저에서 데이터를 '일시적'으로 저장하는 기능이다. 로컬 스토리지와 유사하지만, 중요한 차이점은 데이터가 브라우저 세션이 끝날 때(브라우저 창이나 탭을 닫을 때) 삭제된다는 점이다. 즉, 세션 스토리지는 사용자가 현재 탭을 열어두는 동안만 데이터를 유지하며, 탭을 닫으면 저장된 데이터는 자동으로 삭제된다.

세션 스토리지의 특징:

• 탭 또는 창별로 독립적: 각 브라우저 탭 또는 창에서 세션 스토리지는 독립적으로 작동한다. 한 탭에서 저장된 데이터는 다른 탭에서는 접근할 수 없다.
• 데이터 저장 용량: 일반적으로 로컬 스토리지와 같은 용량(약 5-10MB)을 저장할 수 있다.
• 보안: 세션이 끝나면 데이터가 삭제되므로 민감한 정보를 저장하는 데 있어 로컬 스토리지보다 약간 더 안전할 수 있다.

세션 스토리지 예제 코드

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

// 데이터 불러오기
let data = sessionStorage.getItem('key');
console.log(data); // 'value' 출력

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

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

사용 방법은 로컬 스토리지와 크게 다르지 않다.

세션 스토리지 장단점

세션 스토리지

장점	단점
브라우저 세션이 끝나면 자동으로 데이터가 삭제되어 보안 강화	브라우저 창이나 탭을 닫으면 데이터가 사라짐
탭 또는 창별로 독립적으로 작동하여 다른 탭에 영향 없음	데이터가 영구적으로 저장되지 않음
사용하기 쉬운 API	여러 탭에서 데이터를 공유할 수 없음

세줄 요약

• 로컬 스토리지: 긴 기간 동안 데이터를 유지하고 싶을 때 사용한다. 예를 들어, 사용자의 로그인 상태를 기억하거나 사용자 설정을 저장할 때 유용하다.
• 세션 스토리지: 현재 세션이 끝나면 데이터를 삭제해야 할 때 사용한다. 예를 들어, 사용자 로그인 중의 일시적인 데이터를 관리할 때 적합하다.

이 두 가지 스토리지는 웹 애플리케이션에서 사용자의 데이터를 효율적으로 관리할 수 있는 도구다.