Help us understand the problem. What is going on with this article?

Dexie.jsでIndexedDBを使ってみる

More than 3 years have passed since last update.

Dexie.jsでIndexedDBを使ってみる

IndexedDBに興味を持ったので使ってみようと思いましたが、素で使うのは大変そうなのでDexie.jsというライブラリを利用して、IndexedDBに少し触れてみたいと思います。
公式ドキュメントもあります。

今回はChomeの最新版で試してみます。

IndexedDBはqiita製のメモアプリ「Kobito」にも使用されているようです(多分)

DB定義

AppDatabaseがDB名になります

var db = new Dexie('AppDatabase');

ストア定義

ストアとは、平たく言えばテーブルみたいです。

db.version(1).stores({
  notes: "++id, title, body, *tags, updated_at"
});

今回は以下のようなストアとなります

ストア名 notes
主キー id
その他のキー title, body, tags, updated_at

キーには主キーやユニークキーを設定できます。

++ オートインクリメントな主キー
& ユニークキー
* 複数可(array)
[A+B] 複合index

DBの更新

ストアを更新したりストアの削除・追加をするには、古い定義を残したまま、新しい定義を追加していきます。その際にバージョンを1ずつ上げていくようです。

// バージョン1
db.version(1).stores({
  notes: "++id, title, body, *tags, updated_at"
});

// バージョン2 usersストアを追加
db.version(2).stores({
  notes: "++id, title, body, *tags, updated_at",
  users: "++id, name"
});

// バージョン3 notesストアにgoodを追加
// 更新時にtagsにgoodがあったら、新しく追加したキー「good」にtrueを入れるようにします。
db.version(3).stores({
  notes: "++id, title, body, *tags, good, updated_at",
  users: "++id, name"
}).upgrade(function() {
  return db.notes.modify(function(note) {
    if (note.tags.indexOf('good')) {
      note.good = true;
    }
  });
});

データ追加(add/bulkAdd)

db.notes.add({
  title: "タイトル",
  body: '本文',
  tags: ["IndexedDB", "Dexie.js"],
  updated_at: new Date()
});

データ更新(update)

var id = 1;
// id="1"では更新できませんでした。

db.notes.update(id, {
  body: '本文を更新',
  updated_at: new Date()
});

データ追加/更新(put/bulkPut)

データなければ追加、既にあれば更新となります

db.notes.put({
  id: 2,
  title: "タイトル",
  body: '本文',
  updated_at: new Date()
});

データ全件取得

db.notes
    .toArray()
    .then(function (notes) {
      console.log(notes);
    });

データ削除(delete/bulkDelete)

var id = 1;
db.notes.delete(id);

確認

「F12」でコンソールを開き、Applicationタブへ移動すると「Storage」一覧にIndexedDBという項目があるので、そこで中身が見れます。

Screenshot from 2016-11-22 17-48-48.png

まとめ

上記に載せた以外にも、トランザクションや条件検索などがあります。

シンプルで使いやすいです。

yamayamasan
qiitaでは自分の備忘録的に使っていこうと思ってます
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした