[JavaScript] 로컬 스토리지 VS 세션 스토리지

in JavaScript

JavaScript의 로컬 스토리지와 세션 스토리지에 대해 알아보자.

로컬 스토리지 (Local Storage) VS 세션 스토리지 (Session Storage)

  • 둘 다 웹 브라우저의 저장소
  • 데이터를 클라이언트 측에 저장할 수 있는 기능을 제공
  • 아래는 차이점을 확인할 수 있다.

데이터 유지 기간

  • Local Storage
    • 브라우저를 닫아도 데이터가 유지됨
    • 명시적으로 삭제하지 않는 한 영구적으로 저장됨
  • Session Storage
    • 브라우저의 탭을 닫으면 데이터가 삭제됨
    • 세션동안만 유지됨

      세션 : 일정 기간 동안 유지되는 사용자와 시스템 간의 연결 상태 (주로 사용자의 로그인 상태 유지, 임시 데이터 저장에 사용됨)

접근 범위

  • Local Storage
    • 같은 출처 (Origin, 즉 도메인+프로토콜+포트)가 같다면 모든 탬과 창에서 접근 가능
  • Session Storage
    • 같은 출처라도 각 탭과 창마다 개별적인 저장소 가짐
    • 다른 탭에서 접근 불가

활용 예제

  • Local Storage
    • 로그인 정보, 사용자 설정, 테마 설정 등 장기적으로 유지해야하는 데이터 저장
  • Session Storage
    • 특정 페이지에서만 필요한 임시 데이터 등 일시적인 데이터 저장

사용 방법 (JavaScript)

  • Local Storage

    • // 데이터 저장
localStorage.setItem("username", "JohnDoe");
// 데이터 가져오기
console.log(localStorage.getItem("username")); // "JohnDoe"

  • Session Storage

    • // 데이터 저장
sessionStorage.setItem("sessionUser", "JaneDoe");
// 데이터 가져오기
console.log(sessionStorage.getItem("sessionUser")); // "JaneDoe"