[Web] localStorage와 sessionStorage

웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다.

이 둘을 사용하면 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있다.

• 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있다. 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해준다. 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있다.
• 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행됨.
• 웹 스토리지 객체는 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.

두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공

• setItem(key, value) – 키-값 쌍을 보관
• getItem(key) – 키에 해당하는 값을 받아옴
• removeItem(key) – 키와 해당 값을 삭제
• clear() – 모든 것을 삭제
• key(index) – 인덱스(index)에 해당하는 키를 받아옴
• length – 저장된 항목의 개수를 얻음

두 스토리지 객체는 Map과 유사하다. 하지만 인덱스를 사용해 키에 접근할 수 있다는 점(key(index))에서 차이가 있다.

---

localStorage

1.  사용자 세션 데이터 유지할수 있다
2.  브라우저 닫았다가 다시 열었을 때도 지속된다.
3.  탭을 여러개 열어도 공유된다.
4.  명시적으로 삭제될때까지 지속된다.
5.  변경 사항은 저장되어 현재 및 향후 사이트 방문 시 사용할 수 있다.

 

*  사용자가 브라우저 창을 닫았을 때 데이터는 삭제되지 않으며, 일, 주, 월 및 연도에 사용할 수있는 만료 날짜없이 사용자 정보 데이터를 저장한다.

 

1 2 3 4 5 6 7 8 9

//Set the value in a local storage object localStorage.setItem('name', 'sanghoone');   //Set the value in a local storage object localStorage.getItem('name');   //Delete the value from local storage object localStorage.removeItem('name'); //Delete specifice obeject from local storege localStorage.clear(); //Delete all from local storege

 

sessionStorage

1.  브라우저 세션 기간 동안 만 사용할 수 있으며 탭이나 창을 닫을 때 삭제된다.
2.  새로고침을 해도 유지된다.
3.  변경 된 사항은 현재 페이지에서 닫힐 때까지 저장되어 사용할 수 있다.
4.  탭이 닫히면 저장된 데이터가 삭제 된다.

1 2 3 4 5 6 7 8 9

//Set the value in a session storage object sessionStorage.setItem('name', 'sanghoone');   //Set the value in a session storage object sessionStorage.getItem('name');   //Delete the value from sessionstorage object sessionStorage.removeItem('name'); //Delete specifice obeject from session storege sessionStorage.clear(); //Delete all from session storege