[javascript] IndexedDB 라이브러리 소개

들어가기

HTML5에서 브라우저 환경에서 데이터를 관리하기 위한 다양한 저장소가 있다. Web Storage와 Web Database로 구분된다.

Web Storage는 임시로 로컬 브라우저에 저장하기 위한 저장소이다. 이는 쿠키와는 다르게 서버로 전송 안되며 로컬에서만 사용한다. 종류로는 LocalStorage(만료일없음), SessionStorage(세션유지동안)가 있다. 이런 저장소는 브라우저 강력 새로고침 등에 의해서 제거될 수 있다.

이를 보완할 수 있는 저장소가 있는데 Web Database와 Indexed Database이다. Web Database는 큰 용량의 구조화된 데이터를 사용할 수 있고 Web Storage와는 다르게 큰 데이터를 관리할 수 있다. 처음에 Web SQL Database을 사용했으나 지금은 특정 제품에 종속되어 있다는 이유로 폐기되었다. 최근에는 Indexed Database 사용을 권장하고 있다.

이 글에서는 Indexed Database 라이브리러를 소개하고 간단한 사용법을 살펴볼려고 한다.

작성자: ospace114@empal.com, http://ospace.tistory.com/

IndexeDB 라이브러리들

다음의 라이브러리를 살펴보려고 한다.

이름	URL	라이센스	크기
Dexie.js	http://dexie.org/	Apache License 2.0	208kB/56.6kB
localForage	https://localforage.github.io/localForage/	ApacheLicense 2.0	92.4kB/29.5kB
ZangoDB	https://github.com/erikolson186/znagodb	MIT License	-/166kB

각 라이브러리에 대한 간단한 사용법을 보자.

먼저 Dexie.js이다. 풍부한 기능으로 다중 DB를 지원하고 있다.

//init
var db = new Dexie('mydb');
db.version(1).stores({members:'name, age'});
//save
db.members.put({name:'foo', age:'20'});
//load
db.members.get('foo').then(v=>{ console.log(v); });
//delete
db.members.delete(‘foo’);

version()에 의한 스키마 관리와 추가로 트랜잭션도 지원한다.

다음은 localForage이다. 단순한 인터페이스, localStorage 및 Web DB도 지원하고 localStroage와 비스한 인터페이스 및 비동기 API 지원한다.

//init-단일DB
localforage.config({name:'mydb'});
//init-여러DB
var db = localforage.createInstance({name:'mydb'});
//save
localforage.setItem('foo', {name:'foo', age:20});
//load
localforage.getItem('foo').then(v=>{
  console.log(v);
});
//delete
localforage.removeItem('foo');

다음은 ZangoDB이다. MongoDB와 유사한 API를 제공한다.

//init
var db = new zango.Db(‘mydb’, {members:[‘name’, ‘age’]);
//save
db.collection(‘members’).insert([{name:’foo’, age:20}]);
//load
var data = db.collection(‘members’).find({name:’foo’});
//delete
db.collection(‘members’).remove({name:{$eq:’foo’}}));

결론

가볍고 단순한 구조 데이터를 사용해 빠른 개발을 하고 싶다면 localForage가 좋아보인다. 이는 localStorage와 유사해서 바로 활용할 수 있다.
zangoDb는 기능이 다양하지만 크기가 가장 크고, 코딩 효율성이 떨어진다. 그러나, MangoDB에 익숙한 사람에게는 나쁘지 않다.
Dexie.js가 기능이 가장 풍부하고, 생각보다 코드 크기가 크지 않다. 복잡한 구조 데이터나 다양한 처리에 적합하다. 예제는 단순한 기능만 다루었으나, 다양한 조건에 따른 검색도 가능하고 DB 버전, 트랜잭션 등 다양한 기능 지원하고 있다. 많은 기능을 원하는 경우 선택할 수 있다.

부족한 글이지만 여러분에게 도움이 되었으면 합니다. ^^ 모두 즐거운 코딩생활되세요. ospace.

참고

[1] Getting Started, http://dexie.org/docs/Tutorial/Getting-started

[2] localForage: https://localforage.github.io/localForage/

[3] ZangoDB, http://erikolson186.github.io/zangodb/index.html