Dexiejs

206 views

Published on

dexiejs

Published in: Engineering
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
206
On SlideShare
0
From Embeds
0
Number of Embeds
179
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dexiejs

  1. 1. Dexie.js @4245Ryomt
  2. 2. IAM 鈴木 大学生 @4245Ryomt
  3. 3. Dexie.js
  4. 4. こんな人へ ブラウザ等閉じても状態が消えないようにしたい! 簡単に!
  5. 5. Dexie.js A Minimalistic Wrapper for indexedDB ‑> indexedDBのラッパーライブラリ http://dexie.org/
  6. 6. IndexedDB ファイルやblobを含む構造化された多くのデータを保存するAPI オブジェクト指向データベース 構造家された多くのデータを保存するのに有用 DOM Storage ‑> 少量データの保存に有用 https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API
  7. 7. IndexedDB 主観 つかうのが割と難しい コネクション...トランザクション... カーソル?? もっと簡単に使いたい 客観 非同期をコールバックで扱うので辛い Promiseで扱いたい
  8. 8. Dexie.js わかりやすいAPI 使うのは簡単 非同期はPromise
  9. 9. どんだけ簡単なんだ
  10. 10. データベースの定義 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 }); };
  11. 11. データベースの定義 Dexie.js   const db = new Dexie(databaseName);   const version = 2;   db.version(version).stores({     todos: 'id,text'   });
  12. 12. クエリー操作 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();       } };
  13. 13. クエリー操作 Dexie.js db.todos.where("text")   .equals("say")       .forEach(todos => console.log(todos))
  14. 14. いい感じ! わかりやすいAPIドキュメント https://github.com/dfahlander/Dexie.js/wiki TypeScriptならこんな感じで書けるぜ!なドキュメント https://github.com/dfahlander/Dexie.js/wiki/Typescript
  15. 15. Dexie.js

×