TIL - 20220921

 오늘은 모던 JavaScript 튜토리얼에서 localStorage와 sessionStorage에 대해 공부했다. 작성한 질문은 다음과 같다.

 쿠키를 사용하여 브라우저에 데이터를 저장할 수 있다. 하지만, 또 다른 객체인 localStorage와 sessionStorage를 사용하는 이유는 다음과 같다.

• 쿠키와 달리 웹 스토리지 객체는 네트워크 요청 시 서버로 전송하지 않는다. 이러한 점을 이용하여 쿠키보다 더 많은 자료를 저장할 수 있다.
• 쿠키와 달리 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다. 웹 스토리지 객체 조작은 온전히 자바스크립트 내에서만 수행된다.
• 웹 스토리지 객체는 도메인, 프로토콜, 포트로 정의되는 오리진에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.

 

localStorage의 주요 기능은 다음과 같다.

• 오리진이 같으면 데이터는 모든 탭과 창에서 공유된다.
• 브라우저나 운영체제를 재시작하더라도 데이터가 사라지지 않는다.

 

이러한 localStorage와 달리 sessionStorage의 차이점은 다음과 같다.

• sessionStorage는 localStorage에 비해 기능이 제한적이라 잘 사용하지 않는다.
• sessionStorage는 현재 열려있는 탭에서만 유지된다. 같은 페이지라도 다른 탭에 있다면 다른 곳에 저장되기 때문이다.
• 페이지를 새로 고침 할 때는 sessionStorage에 있는 데이터가 사라지지 않지만 탭을 닫고 새로 열 때는 사라진다.