<javascript> 웹 스토리지(localStorage, sessionStorage) 사용 방법

이번 주제는 웹 스토리지(localStorage, sessionStorage) 사용 방법에 관하여 포스팅 한다.

 

자바스크립트로 웹개발을 하다보면 데이터를 어딘가에 저장해야 할 일이 생긴다. 

그럴때는 대부분 데이터베이스의 서버나, 클라우드에 데이터를 저장하게 되는데, 하지만 저장해야할 데이터가 별로 중요하지 않거나,  유실되도 무방한 데이터 혹은 토큰과 같이 일회성 데이터일 경우 브라우저 내에서 데이터를 저장하도록 한다. 

이번 포스팅에서는 브라우저 내에 데이터를 저장하도록 하는 웹 스토리지 기술인 로컬 스토리지, 세션스토리지에 대해서 알아보도록 하자. 

- 로컬 스토리지(localStorage)
- 세션 스토리지(sessionStorage)

>>> 로컬 스토리지(localStorage) 와 세션 스토리지(sessionStorage)의 차이
 먼저, 로컬 스토리지와 세션 스토리지는 HTML5 에서 추가된 저장소이다. 간단한 키와 값을 저장할 수 있다. key-value 형태의 스토리지의 형태이다. 
 이 두 개의 매커니즘의 차이점은 데이터가 어떠한 범위 내에서 얼마나 오래 보존되느냐에 달라진다. 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않는다. 
 그리고, 세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워진다.
정리하자면, 브라우저에서 같은 웹사이트를 여러 탭이나 여러 창들을 통해 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함게 소멸된다.
반면에, 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아있다. 

 

 하지만 이러한 로컬 스토리지의 데이터 영속성(Persistence) 은 어디까지나 계속해서 동일한 컴퓨터에서 동일한 브라우저를 사용할 때에만 해당한다. 
 즉, 같은 컴퓨터에서 다른 브라우저를 사용하거나 또는 다른 컴퓨터에서 같은 브라우저를 사용하는 경우에는 서로 다른 두 개의 로컬 스토리지에 데이터가 저장된다. 

 두 스토리지의 공통점은 모두 Window 객체 안에 들어가 있다. (F12로 개발자 도구의 애플리케이션 -> 로컬 스토리지를 보시면 됨)
 Storage 객체를 상속받기 때문에 메소드가 공통적으로 존재한다. 도메인 별 용량 제한도 있다.(프로토콜, 호스트, 포트가 같으면 같은 스토리지를 공유한다)  브라우저별로, 기기별로 다르긴 하지만 모바일은 2.5mb, 데스크탑은 5mb~10mb 이다.


>>> 로컬 스토리지
 로컬 스토리지는 window.localStorage에 위치한다. key-value 저장소이기 때문에 key와 value를 순서대로 저장하면 된다. 
값으로는 문자열, 불린, 숫자, null, undefined 등을 저장할 수 있지만, 모두 문자열로 변환된다. 키도 문자열로 변환된다.

//로컬 스토리지에 값 세팅
localStorage.setItem('name', '홍길동')
localStorage.setItem('birth', '1984');

//로컬 스토리지에 값 가져오기
localStorage.getItem('name');
localStorage.getItem(birth');

//로컬 스토리지에 값 삭제
localStorage.removeItem(birth');
localStorage.getItem(birth');

//로컬 스토리지 전체삭제
localStorage.clear();

 

로컬스토리지에 저장 되었음.

localStorage.setItem(key, value)으로 로컬스토리지에 저장한 후, localStorage.getItem(key)로 조회하면 된다. 
localStorage.removeItem(key)으로 해당 키가 지워지고, localStorage.clear()하면 스토리지 전체가 비워진다.

>>>세션 스토리지 (sessionStorage)
 세션 스토리지는 window.sessionStorage에 위치한다. clear, getItem, setItem, removeItem, key 등 모든 메소드가 로컬 스토리지와 같다.
 단지 로컬 스토리지와는 다르게 데이터가 영구적으로 보관되지는 않을 뿐이다.

 

 

>>> 웹 스토리지를 사용할 때 주의 사항 및 해결방법
 오직 문자형(string) 데이터 타입만 지원한다는 것이다.
 숫자형 데이터를 로컬 스토리지에 쓰고 다시 다시 읽어보면 다음과 같이 본래 숫자가 아닌 문자가 나오는 것을 알 수 있다.
웹 스토리지를 사용할 때 위와 같은 문제를 피하기 위해서 많이 사용하는 방법이 JSON 형태로 데이터를 읽고 쓰는 것이다.