localStorage와 sessionStorage

• 클라이언트 측에 데이터를 저장하는 두 가지 방법
• 두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공한다.

1. localStorage

• 동일한 출처의 모든 창과 탭 간에 데이터가 공유된다.
• 데이터는 만료되지 않고, 브라우저를 다시 시작하거나 OS를 재부팅 한 후에도 유지된다.
  • 즉, 데이터는 사용자가 수동으로 삭제할 때까지 지속한다.

2. sessionStorage

• 현재 브라우저 탭에만 존재하며, 다른 탭에는 다른 세션 저장소가 있다.
• 새로고침한 경우에는 데이터가 남아있지만, 브라우저 창이 종료되면 세션 스토리지는 삭제된다.

메서드와 프로퍼티

• 스토리지 항목 값 설정

localStorage.setItem(key, value);
sessionStorage.setItem(key, value);

 

• 스토리지 항목 값 가져오기

localStorage.getItem(key);
sessionStorage.getItem(key);

 

• 스토리지 항목 제거

localStorage.removeItem(key);
sessionStorage.removeItem(key);

 

• 스토리지 항목 제거

localStorage.clear();
sessionStorage.clear();

• 스토리지 항목 개수 가져오기

localStorage.length;
sessionStorage.length;

---

쿠키와의 차이점

• 네트워크 요청 시 서버로 전송되지 않는다.
• 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다.
• 스토리지 객체의 데이터는 동일 출처 정책(same-origin policy)에 따라 동일한 프로토콜, 호스트 이름, 포트 번호에서만 접근할 수 있다.
  
  • 동일 출처 정책
    • 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식

 

🍀참고 사이트

• https://ko.javascript.info/localstorage

localStorage와 sessionStorage

• https://www.digitalocean.com/community/tutorials/js-introduction-localstorage-sessionstorage

Introduction to localStorage and sessionStorage | DigitalOcean

• https://www.w3schools.com/jsref/api_storage.asp

Storage Object

• https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy

동일 출처 정책