Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What are the problem?
@sachiko-kame

IndexedDB周りのAPIをまとめてみました!

はじめに

『理解が間違っているぞ!』というところありましたらご指摘して頂けるととても嬉しいです!
あと、githubのコード使おうとしている方あくまで参考にという感じでお願いします。
もっといい方法がありそうなので…。
よろしくお願いします!:bow_tone1:

IndexedDBをざっくり説明

ブラウザ側に置いとくデータベース
クライアント側ストレージの一つで複雑なデータを保存するときに使うもの。
同一ドメイン内からしかアクセス出来ない。
基本アクセスは非同期。

全体像[code(github)とcodepen]

ある程度動くものとそのコードあると理解できるぞという方向けです。

githubは以下↓
https://github.com/sachiko-kame/indexedDBSample
※試しに使う際は、Chrome拡張機能の[Web Server for Chrome]などを使うのオススメです!
※使い方イメージなので機能はそんなにありません。
※少し機能追加したりしています。

codepen↓
ブラウザがsafariだと動きません…:disappointed_relieved:

See the Pen abbPbJW by sachiko (@sachiko-kame) on CodePen.

基本形

基本は、
データベース作成して
そこにオブジェクト作成して、
オブジェクトの中身操作と行った感じです!

const objectName = 'humans'
var request = window.indexedDB.open(dbName);
request.onerror = function(event) {
};
request.onsuccess = function(event) {
    var db = event.target.result;
    var customerObjectStoreRequest = db.transaction(objectName, "readonly").objectStore(objectName).getAll();
    customerObjectStoreRequest.onerror = function(event) {
        db.close();
    };
    customerObjectStoreRequest.onsuccess = function(event) {
        var datas = event.target.result;
        db.close();
    }
}
request.onupgradeneeded = function(event) {
    var db = event.target.result;
    var objectStore = db.createObjectStore(objectName, {
        keyPath: 'my_id',
        autoIncrement: true
    });
    objectStore.createIndex("name", "name", {
        unique: true
    }); //本来は名前はuniqueってことはないと思います!(本来名前は被るので…)
};

:hatched_chick:以下の処理おこなう場所として、このコールバックの中で行わなければいけないといったものがあります。
:hatched_chick:私は基本オブジェクトストアの作成削除に関連するものがonupgradeneeded中でおこなう、レコードの追加削除はonsuccessないでおこなうといった理解です。
スクリーンショット 2019-11-16 19.53.42.png

では早速

※よく使いそうな部分のみ厳選

:large_blue_diamond:IDBFactory

上記部分だと以下部分のopenの箇所で使用

var request = window.indexedDB.open(dbName, 3);

関数
:robot:open
使用目的:データベースへのアクセス
open(作成又はアクセスするデータベースの名前):IDBOpenDBRequest
open(作成又はアクセスするデータベースの名前, バージョンの指定※指定しなければ1になる):IDBOpenDBRequest

:frowning2:なぜバージョン指定が必要なのか?
最初に作成した時は、onupgradeneededが実行されるがそのあとは実行されない、onupgradeneededの中だけしか行えないことをしたい時は、バージョンをあげないといけない。

:robot:deleteDatabase
使用目的:データベースの削除
deleteDatabase(削除するデータベースのな名前):IDBOpenDBRequest

:large_blue_diamond:IDBDatabase

上記部分だと以下部分のtransactionの箇所で使用

var customerObjectStoreRequest = db.transaction(objectName, "readonly").objectStore(objectName).getAll();

関数
:robot:close
使用目的:データベースを閉じる
close():Void(戻り値なし)

:robot:createObjectStore
使用目的1:オブジェクトストアの生成
使用目的2:インデックスの生成
createObjectStore(新しく作られるオブジェクトストア名, { keyPath: キーにしたい名前):IDBObjectStore
createObjectStore(新しく作られるオブジェクトストア名, { keyPath: キーにしたい名前, autoIncrement:(true or false) }):IDBObjectStore

:robot:deleteObjectStore
使用目的:オブジェクトストアの削除
deleteObjectStore(削除したいオブジェクトストアの名前)

:robot:transaction
使用目的:オブジェクトストアにアクセス
transaction(アクセスしたいオブジェクトストアの名前):IDBTransaction
transaction(アクセスしたいオブジェクトストアの名前, mode):IDBTransaction
modeは基本readonlyreadwriteを使用すればいいと思います。
読み込みだけの時はreadonlyそれ以外readwriteとすれば問題ないと思います!

:large_blue_diamond:IDBObjectStore

上記部分だと以下部分のgetAllの箇所で使用

var customerObjectStoreRequest = db.transaction(objectName, "readonly").objectStore(objectName).getAll();

プロパティ
:robot:name
使用目的:オブジェクトストの名前取得
name

関数
:robot:add
使用目的:オブジェクトストに新しいレコードを追加
add(追加するもの):IDBRequest
add(追加するもの, レコードを識別するために使用するキー):IDBRequest

???レコードを識別するために使用するキー

:robot:clear
使用目的:オブジェクトストに追加されたレコードを全削除するためのもの
clear():IDBRequest

:robot:count
使用目的:オブジェクトストに追加されたレコードの総数
count():IDBRequest
count(query):IDBRequest

queryにはIDBKeyRangeを入れます。IDBKeyRange作成イメージとして使い方は以下のような感じです!

const keyRangeValue = IDBKeyRange.only(1); //キーが1と一致
const keyRangeValue = IDBKeyRange.only("Bill"); //キーがBillと一致

:robot:delete
使用目的:オブジェクトストに追加したレコードの削除(指定して削除)
delete(Key):IDBRequest
delete(query):IDBRequest

Keyに関してはkeyPathに指定した値を入れればいいと思ってます。
queryにはIDBKeyRangeを入れます。IDBKeyRange作成イメージとして使い方は以下のような感じです!

const keyRangeValue = IDBKeyRange.only(1); //キーが1と一致
const keyRangeValue = IDBKeyRange.only("Bill"); //キーがBillと一致

:robot:deleteIndex
使用目的:インデックスを削除(指定して削除)
deleteIndex(削除するインデックスの名前)

:robot:get
使用目的:オブジェクトストアから特定のレコードを取得する
get():IDBRequest

:robot:getKey

:robot:getAll

:robot:openCursor

:robot:index
使用目的:オブジェクトストアからインデックスを開く
index(使用するインデックスの名前):IDBIndex

:large_blue_diamond:IDBIndex

一個上のobjectのindex関数で取得できるものです。

プロパティ

:robot:name
使用目的:取得しているインデックスの名前取得

関数

:robot:openCursor

:robot:getAll

:robot:get

参考URL

IndexedDB API(developer.mozilla.org)
IndexedDB を使用する(developer.mozilla.org)
クライアント側ストレージ(developer.mozilla.org)
DRYな備忘録
からのリンクなど
あとはその都度出してます!

最後に

今後肉付けしていく予定です:bow_tone1:

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
6
Help us understand the problem. What are the problem?