Web Storage (22.11.20 TIL)

웹 스토리지 (Web Storage)

웹 스토리지 API는 기존 쿠키의 문제점을 극복하기 위해 웹 브라우저가 직접 데이터를 저장할 수 있게 해준다. HTML5 이전에는 응용 프로그램이 데이터를 서버에게 요청할 때마다 매번 쿠키라는 곳에 그 정보를 저장했다.

하지만 쿠키와 다르게 웹 스토리지는 네트워크 요청시 서버로 전송되지 않으며 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있도록 해준다. 대부분의 브라우저는 최소 2MB 혹은 5MB 이상의 웹 스토리지를 저장할 수 있는 많은 공간을 가지고 있다. 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것이다.

이러한 웹 스토리지는 오리진(origin)마다 단 하나씩만 존재한다. 오리진이란 도메인과 프로토콜의 한 쌍으로 이루어진 식별자이다. 따라서 하나의 오리진에 속하는 모든 웹 페이지는 같은 데이터를 저장하며 또한 같은 데이터에 접근할 수 있다. 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.

웹 스토리지 객체

웹 스토리지 API는 사용자가 데이터를 저장할 수 있도록 두 가지 객체를 제공한다.

• sessionStorage 객체 : 하나의 세션만을 위한 데이터를 저장하는 객체
• localStorage 객체 : 보관 기한이 없는 데이터를 저장할 수 있는 객체

로컬 스토리지 객체 (Local Storage)

localStorage 객체는 보관 기한이 없는 데이터를 저장한다. 데이터는 동일한 오리진을 가진 모든 탭과 창에서 공유되기 때문에 한 창에 데이터를 설정하면 다른 창에서 변동 사항을 볼 수 있다. 브라우저 탭이나 창이 닫히거나, 컴퓨터를 재부팅 해도 저장된 데이터는 없어지지 않는다.

세션 스토리지 객체 (Session storage)

sessionStorage 객체는 하나의 세션만을 위한 데이터를 저장한다. 데이터는 현재 떠 있는 탭에서만 유지되며 사용자가 브라우저 탭이나 창을 닫으면 이 객체에 저장된 데이터는 사라진다. (새로고침을 한다고 해서 데이터가 사라지진 않는다.) 로컬 스토리지에 비해 자주 사용되지는 않는데 ,그 이유는 오리진뿐만 아니라 브라우저 탭에도 종속되어 있다는 제약이 있고 제공하는 프로퍼티와 메서드가 훨씬 제한적이기 때문이다. 

요약

로컬 스토리지 객체 (Local Storage)	세션 스토리지 객체 (Session storage)
오리진이 같은 탭, 창 전체에서 공유된다.	오리진이 같은 브라우저 탭, iframe 에서 공유된다.
브라우저를 껐다 켜도 남아있다.	페이지를 새로고침해도 남아있다. 하지만 탭이나 브라우저를 종료하면 사라진다.

 

 

참고 :

코딩교육 티씨피스쿨

 

localStorage와 sessionStorage