localStorage & sessionStorage

 

localStorage와 sessionStorage 

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

 

쿠키와 차이점

1.  웹 스토리지 객체는 네트워크 요청시 서버로 전송되지 않는다. 그래서 쿠키보다 더 많은 자료를 보관할 수 있다. 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있다. 

2. 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서만 수행된다.

3. 웹 스토리지 객체는 도메인.프로토콜.포트로 정의되는 오리진(origin)에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.

4. 쿠키는 4kb 용량 제한등 개수와 용량의 제한이 있다. 웹 스토리 객체도 도메인별 용량 제한이 있지만 쿠키보다 훨씬 크다. 

5. 쿠키는 만료일자가 있어 영구적으로 저장되지 않지만 localStorage는 영구적으로 저장된다. 

 

localStorage

window.localStorage에 위치한다.

오리진이 같은 경우 모든 탭과 창에서 공유된다. 오리진만 같다면 url경로가 달라도 동일한 결과를 볼 수 있다. 

저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 저장되기 때문에 브라우저나 os가 재시작하더라도 데이터는 파기되지 않는다.  

sessionStorage 

window.sessionStorage 에 위치한다. localStorage에 비해 자주 사용되지는 않는다. localStorage에 비해 훨씬 제한적이기 때문이다. 

오리진이 같은 브라우저 탭, iframe에서만 공유된다. 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장되기 때문에 현재 떠 있는 탭 내에서만 유지된다.

하지만 하나의 탭에 여러개의 iframe이 있는 경우에는 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유된다. 

메서드와 프로퍼티 

두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공한다.  Map과 유사하게 set/get/remove를 할 수 있다. 하지만 인덱스를 이용해 키에 접근할 수 있다는 점에서 차이가 있다. 

 

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

일반 객체처럼 사용

프로퍼티를 변경하거나 접근할 때 일반 객체와 같이 접근할 수 있다. 하지만 두가지 이유로 권장하지 않는다. 

 

• 사용자가 ‘length’나 ‘toString’를 localStorage의 내장 메서드 키로 설정할 수 있다. 이렇게 되면 getItem이나 setItem은 정상적으로 작동해도 일반 객체처럼 다루면 TypeError가 발생한다.  
• 데이터를 수정하려면 storage 이벤트가 발생하는데 객체처럼 접근 했을 때는 이벤트가 발생하지 않는다. 

키 순회하기

스토리지 객체는 iterable 객체가 아니다. 하지만 배열처럼 다루면 전체 key-value를 얻을 수 있다. 

일반 객체를 다룰 때 처럼 for key in localStorage 반복문을 사용하는 것도 가능하다. 하지만 이렇게 일반 객체처럼 접근하게 되면 불필요한 내장 필드까지 출력되므로 골라내야 한다. 

Object.keys()로 키를 담은 배열로 localStorage를 순회하는 방법도 있다. 

 

키와 값은 문자열

localStorage의 키와 값은 반드시 문자열로 이루어 져야 한다. 문자열이 아닌 다른 자료형을 사용하게 되면 저장할 때 객체는 무조건 toString 메서드가 호출된 상태로 저장되기 때문에 문자열로 자동 변환된다.

객체를 저장 할 경우 두 가지의 방법이 있다. 키-값 형태로 풀어서 여러 개를 저장할 수 있다. 이때 키와 값이 각각 문자열로 저장된다 아니면  JSON을 사용하는 것도 가능하다. 객체를 통째로 JSON.stringify() 통해 객체 형식 그대로 문자열로 변환하여 저장해주고받을 때는 JSON.parse()로 파싱 해주면 된다.  

 

 

storage 이벤트

localStorage나 sessionStorage 의 데이터가 갱신될 때, storage이벤트가 발생한다.

즉 setItem, removeItem, clear를 호출할 때 발생한다.  

storage 이벤트는 아래의 프로퍼티들을 지원한다.

 

•  key – 변경된 데이터의 키(.clear()를 호출했다면 null)
• oldValue – 이전 값(키가 새롭게 추가되었다면 null)
• newValue – 새로운 값(키가 삭제되었다면 null)
• url – 갱신이 일어난 문서의 url
• storageArea – 갱신이 일어난 localStorage나 sessionStorage 객체

https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048

https://ko.javascript.info/localstorage

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

www.zerocho.com/category/HTTP/post/5b594dd3c06fa2001b89feb9