로컬 스토리지(local storage)와 세션 스토리지(session storage)는 영어의 뜻 그대로 저장소이다. HTML5부터 도입된 웹 스토리지(web storage)으로 이전에는 쿠키를 저장소의 역할로 사용했다. 스토리지에는 key
와 value
를 저장하게 된다.
로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성에 있다. 로컬 스토리지는 사용자가 정보를 지우지 않는 이상 정보가 계속 남아있다. 하지만 세션 스토리지는 브라우저의 탭이나 윈도우가 닫히면 스토리지가 초기화된다.
특징
- 서버에 불필요하게 데이터를 저장하지 않아도 된다.
👉 서버에 자동 전송 되지 않음- 데이터 저장 용량이 큰 편이다.
👉 모바일은 2.5Mb, 데스크탑은 5Mb~10Mb / IndexedDB를 사용하면 더 많은 용량 저장 가능- 브라우저에서만 사용 가능하며 서버에서 접근이 불가능하다.
👉 HTML5를 지원하는 브라우저에서만 사용 가능
문자열 외에도 자바스크립트의 모든 원시형 데이터와 객체 저장 가능
또 다른 저장 방식으로는 IndexedDB가 있다. index를 가지고 빠르게 검색이 가능한 방식이며, 보다 더 큰 용량을 저장할 수 있다.
또 단순한 key-value
형식의 데이터보다 복잡한 객체 형태의 데이터를 저장할 수 있다는 특징이 있다. 또, 비동기식으로 데이터를 처리해서 더 나은 성능을 보여준다.
로컬스토리지는 Window.localStorage
에 위치한다. 위에서 언급한 것처럼 사용자가 수동으로 지우기 전까지 브라우저에 기억되며, 자동 로그인 등에 사용된다.
저장소를 사용하려면 먼저 저장을 해야하고, 그 저장된 값을 불러야하고 제거할 필요도 있을 것이다.
//로컬스토리지에 데이터를 저장
localStorage.setItem('key', 'value');
// 저장한 값을 불러온다
const cat = localStorage.getItem('key');
// 저장된 값 삭제
localStorage.removeItem('key');
// 로컬 스토리지 전체 데이터 삭제
localStorage.clear();
여기서, value
에 객체가 들어갈 경우도 있는데, 객체가 문자열 형태로 저장되게 된다. 그래서 객체를 그대로 가져오려면 Json
을 이용하는 것이 좋다.
localStorage.setItem('object', JSON.stringify({ a: 'b' }));
JSON.parse(localStorage.getItem('object'));
보낼 때는 JSON.stringify
을 사용해서 보내고 받을 때는 JSON.parse
으로 받는다.
세션 스토리지는 로컬 스토리지와 매우 유사한 메서드를 제공한다. 메서드들은 Window.sessionStorage
에 저장되어있다. 세션스토리지는 페이지 세션이 끝날 때 초기화되는 특징이 있다. 쇼핑몰의 장바구니 등에 사용된다. 로컬 스토리지와 마찬가지로 key
와 value
로 데이터를 저장한다. 사용법은 로컬 스토리지와 같아서 생략하겠다.
IndexedDB는 비동기식 데이터베이스 API로, 로컬스토리지처럼 영속적으로 데이터가 유지되면서 큰 용량을 저장할 수 있다.(특정 상황에서 삭제될 수 있음) 또, index를 사용해 빠르게 데이터를 검색할 수 있으며 key
와 value
로 구성되어 있지만, 보다 복잡한 구조의 데이터도 저장할 수 있다. 또 사용법도 로컬, 세션 스토리지보다 복잡하다.
open()
메서드를 사용해서 데이터 베이스를 열 수 있다. 인수로는 데이터 베이스의 이름과 버전을 받는다. 버전은 데이터 베이스를 업그레이드(변경)하고 추적하는데 사용된다. 데이터 베이스 수정시, 버전도 바꿔줘야한다.
const request = indexedDB.open('myDatabase', 1);
objectStore
는 데이터를 담는 공간으로 고유한 이름을 가져야한다.
request.onupgradeneeded = function(event) {
const db = event.target.result;
const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
};
myDatebase
가 새로 열리거나 수정될 때(버전이 변경될 때),onupgradeneeded
이벤트가 트리거된다. 이 이벤트의 핸들러에서objectStore
을 생성할 수 있다.
데이터베이스 연결에 성공하면 onsuccess
이벤트가 트리거되고 이벤트 핸들러를 통해서 데이터를 추가, 조회 할 수 있다.
request.onsuccess = function(event) {
const db = event.target.result;
const transaction = db.transaction(['myObjectStore'], 'readwrite');
const objectStore = transaction.objectStore('myObjectStore');
const data = { id: 1, name: 'John', age: 30 };
const addRequest = objectStore.add(data);
addRequest.onsuccess = function(event) {
// 데이터 추가가 성공적으로 이뤄졌을 때 실행할 함수 입력;
};
};
event.target.result
를 사용하여 데이터베이스를 가져온다. 그 다음,transaction()
메서드를 사용하여 트랜잭션을 생성한다. 트랜잭션은 데이터베이스 작업을 묶어서 실행하는데 사용된다. 이때,objectStore()
메서드를 사용하여myObjectStore
라는 이름의 Object Store를 가져온다.
그리고, 추가하고자 하는 데이터를 객체 형태로 생성하고add()
메서드를 사용하여 데이터를myObjectStore
에 추가한다.add()
메서드는 객체를 저장소에 추가하는 메서드이다. 데이터 추가가 성공적으로 이루어지면,addRequest.onsuccess
핸들러에서 원하는 함수를 작성할 수 있다.
* 트렌잭션: 데이터베이스의 상태를 변화시키기 해서 수행하는 작업의 단위