[JS] 로컬스토리지(localStorage)란?

💡 로컬스토리지(localStorage)와 세션스토리지(sessionStorage)는 둘 다 브라우저의 웹 스토리지(Web Storage) API에 속하는 기능으로, 사용자의 로컬 환경(즉, 브라우저)에 데이터를 저장하는 방법을 제공합니다. 이들은 쿠키와 비슷한 역할을 하지만, 용량이 더 크고 서버와의 통신 없이 클라이언트 측에 데이터를 저장할 수 있습니다.

 

로컬스토리지(localStorage) 특징

• 데이터 지속성
  • 로컬스토리지에 저장된 데이터는 사용자가 브라우저를 닫거나 컴퓨터를 재부팅해도 삭제되지 않습니다. 명시적으로 데이터를 삭제하거나 코드로 제거하지 않는 한, 해당 데이터는 무기한으로 유지됩니다.
• 데이터 용량
  • 로컬스토리지에 저장할 수 있는 데이터의 용량은 보통 브라우저마다 다르지만, 일반적으로 도메인당 약 5~10MB 정도입니다. 이는 쿠키(약 4KB)보다 훨씬 많은 데이터를 저장할 수 있게 해줍니다.
• 데이터 접근성
  • 같은 도메인 내에서만 접근 가능합니다. 즉, 같은 도메인에 속한 모든 웹 페이지에서 로컬스토리지에 접근할 수 있습니다. 단, 다른 도메인이나 서브도메인에서는 접근이 불가능합니다.
• 데이터 형식
  • 로컬스토리지에 저장되는 데이터는 문자열(string) 형식이어야 합니다. 따라서 객체나 배열 등을 저장할 때는 JSON.stringify()를 사용해 문자열로 변환한 후 저장하고, 불러올 때는 JSON.parse()를 사용해 다시 객체나 배열로 변환해야 합니다.
• 사용법
  • 저장하기: localStorage.setItem('key', 'value');
  • 불러오기: const value = localStorage.getItem('key');
  • 삭제하기: localStorage.removeItem('key');
  • 전체 삭제: localStorage.clear();

 

세션스토리지(sessionStorage)

세션스토리지는 로컬스토리지와 유사하지만, 데이터의 생명 주기가 다릅니다.

세션스토리지에 저장된 데이터는 브라우저를 닫을 때까지 유지됩니다.
즉, 브라우저 탭을 닫으면 해당 탭에 관련된 세션스토리지 데이터는 삭제됩니다.
이는 사용자가 한 세션(session) 동안만 데이터를 유지하고자 할 때 유용합니다. 로컬스토리지와 유사하게 세션스토리지도 도메인당 약 5~10MB 정도의 용량을 제공합니다.

 

주의사항

로컬스토리지는 브라우저 내에 데이터를 영구적으로 저장하는 데 매우 유용한 도구입니다.

게시판과 같은 웹 애플리케이션에서는 사용자의 설정, 글의 임시 저장 등을 위해 로컬스토리지를 효과적으로 활용할 수 있습니다. 다만, 보안이 중요한 데이터는 로컬스토리지에 저장하지 말아야 하며, 민감한 데이터는 반드시 서버에 안전하게 저장하도록 해야 합니다.