狠狠撸

IAM
鈴木
大学生
@4245Ryomt

こんな人へ
ブラウザ等閉じても状態が消えないようにしたい！
簡単に！

Dexie.js
A Minimalistic Wrapper for indexedDB
?> indexedDBのラッパーライブラリ
http://dexie.org/

IndexedDB
ファイルやblobを含む構造化された多くのデータを保存するAPI
オブジェクト指向データベース
構造家された多くのデータを保存するのに有用
DOM Storage ?> 少量データの保存に有用
https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API

IndexedDB
主観
つかうのが割と難しい
コネクション...トランザクション...
カーソル？？
もっと簡単に使いたい
客観
非同期をコールバックで扱うので辛い
Promiseで扱いたい

Dexie.js
わかりやすいAPI
使うのは簡単
非同期はPromise

データベースの定義
IndexedDB
let?db?=?null;
let?dbOpenRequest?=?window.indexedDB.open(databaseName,?version);
dbOpenRequest.onsuccess?=?(event)?=>?{
??db?=?event.target.result;
};
dbOpenRequest.onupgradeneeded?=?(event)?=>?{
??const?db?=?event.target.result;
??const?objectStore?=?
??? db.createObjectStore('todos',?{?keyPath:?'id'?});
??objectStore.createIndex('text',?'text',?{?unique:?false?});
};

データベースの定義
Dexie.js
??const?db?=?new?Dexie(databaseName);
??const?version?=?2;
??db.version(version).stores({
????todos:?'id,text'
??});

クエリー操作
IndexedDB
const?sayEqualRange?=?IDBKeyRange.only("say");
const?todoStore?=?db.transaction("todos").objectStore("todos");
const?textIndex?=?todoStore.index("text");
textIndex.openCursor(sayEqualRange).onsuccess?=?event?=>?{
????? const?cursor?=?event.target.result;
? if?(cursor)?{
????? ? console.log(cursor.value)
????????? cursor.continue();
????? }
};

クエリー操作
Dexie.js
db.todos.where("text")
? .equals("say")
????? .forEach(todos?=>?console.log(todos))

いい感じ！
わかりやすいAPIドキュメント
https://github.com/dfahlander/Dexie.js/wiki
TypeScriptならこんな感じで書けるぜ！なドキュメント
https://github.com/dfahlander/Dexie.js/wiki/Typescript

狠狠撸

Dexiejs

More Related Content

Dexiejs