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

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

# IndexedDBをざっくり説明
ブラウザ側に置いとくデータベース
[クライアント側ストレージ](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)の一つで複雑なデータを保存するときに使うもの。
同一ドメイン内からしかアクセス出来ない。
基本アクセスは非同期。

# 全体像[code(github)とcodepen]
ある程度動くものとそのコードあると理解できるぞという方向けです。

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

**codepen↓**
~~ブラウザがsafariだと動きません…:disappointed_relieved:~~ (動くようになったみたいです。)

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="sachiko-kame" data-slug-hash="abbPbJW" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="abbPbJW">
  <span>See the Pen <a href="https://codepen.io/sachiko-kame/pen/abbPbJW">
  abbPbJW</a> by sachiko (<a href="https://codepen.io/sachiko-kame">@sachiko-kame</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 基本形

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

```.js
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`ないでおこなうといった理解です。
<img width="693" alt="スクリーンショット 2019-11-16 19.53.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/efbeb89d-4abe-0493-2cfe-da379c38e49a.png">


# では早速
<font color=red>**※よく使いそうな部分のみ厳選**</font>

## :large_blue_diamond:[IDBFactory](https://developer.mozilla.org/ja/docs/Web/API/IDBFactory)

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

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

**関数**
:robot:[open](https://developer.mozilla.org/ja/docs/Web/API/IDBFactory/open)
**`使用目的`:データベースへのアクセス**
open(作成又はアクセスするデータベースの名前):[IDBOpenDBRequest](https://developer.mozilla.org/ja/docs/Web/API/IDBOpenDBRequest)
open(作成又はアクセスするデータベースの名前, バージョンの指定※指定しなければ1になる):[IDBOpenDBRequest](https://developer.mozilla.org/ja/docs/Web/API/IDBOpenDBRequest)

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

:robot:[deleteDatabase](https://developer.mozilla.org/ja/docs/Web/API/IDBFactory/deleteDatabase)
**`使用目的`:データベースの削除**
deleteDatabase(削除するデータベースのな名前):[IDBOpenDBRequest](https://developer.mozilla.org/ja/docs/Web/API/IDBOpenDBRequest)

## :large_blue_diamond:[IDBDatabase](https://developer.mozilla.org/ja/docs/Web/API/IDBDatabase)

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

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

**関数**
:robot:[close](https://developer.mozilla.org/ja/docs/Web/API/IDBDatabase/close)
**`使用目的`:データベースを閉じる**
close():Void(戻り値なし)

:robot:[createObjectStore](https://developer.mozilla.org/ja/docs/Web/API/IDBDatabase/createObjectStore)
**`使用目的1`:オブジェクトストアの生成**
**`使用目的2`:インデックスの生成**
createObjectStore(新しく作られるオブジェクトストア名, { keyPath: キーにしたい名前):[IDBObjectStore](https://developer.mozilla.org/ja/docs/Web/API/IDBObjectStore)
createObjectStore(新しく作られるオブジェクトストア名, { keyPath: キーにしたい名前, autoIncrement:(true or false) }):[IDBObjectStore](https://developer.mozilla.org/ja/docs/Web/API/IDBObjectStore)

:robot:[deleteObjectStore](https://developer.mozilla.org/ja/docs/Web/API/IDBDatabase/deleteObjectStore)
**`使用目的`:オブジェクトストアの削除**
deleteObjectStore(削除したいオブジェクトストアの名前）

:robot:[transaction](https://developer.mozilla.org/ja/docs/Web/API/IDBDatabase/transaction)
**`使用目的`:オブジェクトストアにアクセス**
transaction（アクセスしたいオブジェクトストアの名前）:[IDBTransaction](https://developer.mozilla.org/en-US/docs/Web/API/IDBTransaction)
transaction（アクセスしたいオブジェクトストアの名前, <font color=red>mode</font>）:[IDBTransaction](https://developer.mozilla.org/en-US/docs/Web/API/IDBTransaction)
※<font color=red>mode</font>は基本**`readonly`**か**`readwrite`**を使用すればいいと思います。
読み込みだけの時は**`readonly`**それ以外**`readwrite`**とすれば問題ないと思います！

## :large_blue_diamond:[IDBObjectStore](https://developer.mozilla.org/ja/docs/Web/API/IDBObjectStore)

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

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

**プロパティ**
:robot:[name](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/name)
**`使用目的`:オブジェクトストの名前取得**
name

**関数**
:robot:[add](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/add)
**`使用目的`:オブジェクトストに新しいレコードを追加**
add（追加するもの）:[IDBRequest](https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest)
add（追加するもの, レコードを識別するために使用するキー）:[IDBRequest](https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest)

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


:robot:[clear](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/clear)
**`使用目的`:オブジェクトストに追加されたレコードを全削除するためのもの**
clear():[IDBRequest](https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest)


:robot:[count](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/count)
**`使用目的`:オブジェクトストに追加されたレコードの総数**
count():[IDBRequest](https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest)
count(<font color=red>query</font>):[IDBRequest](https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest)

※<font color=red>query</font>には[IDBKeyRange](https://developer.mozilla.org/en-US/docs/Web/API/IDBKeyRange)を入れます。IDBKeyRange作成イメージとして使い方は以下のような感じです！

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

:robot:[delete](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/delete)
**`使用目的`:オブジェクトストに追加したレコードの削除(指定して削除)**
delete(<font color=blue>Key</font>):[IDBRequest](https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest)
delete(<font color=red>query</font>):[IDBRequest](https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest)

※<font color=blue>Key</font>に関してはkeyPathに指定した値を入れればいいと思ってます。
※<font color=red>query</font>には[IDBKeyRange](https://developer.mozilla.org/en-US/docs/Web/API/IDBKeyRange)を入れます。IDBKeyRange作成イメージとして使い方は以下のような感じです！

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


:robot:[deleteIndex](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/deleteIndex)
**`使用目的`:インデックスを削除(指定して削除)**
deleteIndex(削除するインデックスの名前)

:robot:[get](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/get)
**`使用目的`:オブジェクトストアから特定のレコードを取得する**
get():[IDBRequest](https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest)


:robot:[getKey](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/getKey)


:robot:[getAll](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/getAll)


:robot:[openCursor](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/openCursor)

:robot:[index](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/index)
**`使用目的`:オブジェクトストアからインデックスを開く**
index(使用するインデックスの名前):[IDBIndex](https://developer.mozilla.org/en-US/docs/Web/API/IDBIndex)


## :large_blue_diamond:[IDBIndex](https://developer.mozilla.org/en-US/docs/Web/API/IDBIndex)
一個上のobjectのindex関数で取得できるものです。

**プロパティ**

:robot:[name](https://developer.mozilla.org/en-US/docs/Web/API/IDBIndex/name)
**`使用目的`:取得しているインデックスの名前取得**


**関数**

:robot:[openCursor](https://developer.mozilla.org/en-US/docs/Web/API/IDBIndex/openCursor)

:robot:[getAll](https://developer.mozilla.org/en-US/docs/Web/API/IDBIndex/getAll)

:robot:[get](https://developer.mozilla.org/en-US/docs/Web/API/IDBIndex/get)


# 参考URL
[IndexedDB API(developer.mozilla.org)](https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API)
[IndexedDB を使用する(developer.mozilla.org)](https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB)
[クライアント側ストレージ(developer.mozilla.org)](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)
[DRYな備忘録](http://otiai10.hatenablog.com/entry/2015/02/05/094003)
からのリンクなど
あとはその都度出してます！


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