[ WEB ] Web Storage에 대해 알아보기.

 

 

Web Storage API는 브라우저에서 키/값 쌍으로 구성되며, 객체와 비슷하다. 이 데이터들은 페이지 로딩에도 온전하게 유지가 되고 key와 value는 항상 문자열이다.(정수를 사용할 경우 자동으로 string으로 변경됨. 자스의 객체 동작 방식과 유사.) 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공한다.

 

 

 

 

Web Storage 개념과 사용법

Web Storage는 sessionStorage와 LocalStorage의 두 가지 방식이 있으며, Window.sessionStorage와 Window.localStorage 속성을 통해 사용할 수 있다. 두 가지 속성중 하나에 접근하면 Storage 객체의 인스턴스를 생성하게 되고, 그것을 사용하여 데이터 항목을 추가, 회수, 제거 할 수 있다.두 가지 속성의 Storage 객체는 각각의 출처별로 다른 것을 사용하며 서로 독립적으로 사용이 가능하다.

 

 

 

 

1. sessionStorage 

각각의 출처에 대해 독립적인 저장 공간을 페이지 세션이 유지되는 동안(브라우저가 열려있는 동안) 제공한다.

1. 세션에 한정하여(즉 브라우저 또는 탭이 닫힐 때까지만) 데이터를 저장한다.
2. 데이터를 절대 서버로 전송하지 않는다. (쿠키와의 차이점)
3. 저장 공간이 쿠키보다 크다. (최대 5MB)

 

 

 

2. localSorage

localStorage도 sessionStorage와 같지만 브라우저를 닫았다 열어도 데이터가 남아있다.

1. 유효기간 없이 데이터를 저장하고, JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라진다.
2. 저장 공간이 쿠키와 sessionStorage보다 크다.

 

 

 

 

 

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

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

 

 

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

 

 

 

 

 

 

쿠키와 웹 스토리지의 차이점

-> 쿠키와의 차이점은 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않음. 그래서 쿠키보다 더 많은 자료를 보관할 수 있다.

 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행된다. 웹 스토리지 객체는 도메인,프로토콜,포트로 정의되는 오리진(origin)에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.

 

 

 

 

 

 

브라우저 호환성

Window.localStorage 브라우저 호환성

 

 

Window.sessionStorage 브라우저 호환성

 

 

 

 

---

 

 

🌸 출처 🌸

 

Web Storage API - MDN

Storage - MDN

Session Storage - MDN

https://ko.javascript.info/localstorage