忍者ブログ

VB.NET-TIPS などプログラミングについて

VB.NETのTIPS(小技集)を中心に、Javascript、PHP その他のプログラミングについて少し役に立つ情報を発信します。いわゆる個人的な忘備録ですが、みなさんのお役に立てれば幸いです。

JavaScript IndexedDB の使い方5(カーソル処理)

今回はカーソルを使って「オブジェクトストア」に登録された全てのデータを取得する方法について説明します。

カーソル処理を行う場合でも、データ追加処理と同様にデータベースの「トランザクション」を取得し、 「トランザクション」から「オブジェクトストア」オブジェクトを取得します。
その後で「オブジェクトストア」オブジェクトの openCursor メソッドでカーソルオープンのリクエストを行います。

openCursor メソッドの書式とイベント関数の定義は以下の様になります。 (尚 openCursor の引数のキー範囲指定は getAll と同様です。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// openCursorメソッド(objectStore:「オブジェクトストア」オブジェクト)
var request = objectStore.openCursor( [query , [direction] ] );
request.onsuccess = function(event) {
    // 取得が成功した場合の関数宣言(event.target.result にカーソルデータが返る)
    var cursor = event.target.result;   //取敢えず変数で受ける(cursor.value でデータが参照できる)
};
request.onerror = function(event) {
    // 取得エラーの場合の関数宣言
};
 
<パラメータ>
・query:キー文字列または IDBKeyRange オブジェクトのクエリー指定
・direction:カーソル移動の指定("next", "nextunique", "prev", "prevunique" を指定)
              "next"      :キー昇順(デフォルト)
              "nextunique":キー昇順で重複キーは最初のデータを取得
              "prev"      :キー降順
              "prevunique":キー降順で重複キーは最初のデータを取得
 
<戻り値>
request :IDBRequest オブジェクト
 


openCursor メソッドが成功した時には event.target.resultカーソルオブジェクトが返ります。
このカーソルオブジェクトが「null」では無い場合、その中の「value」に実際のデータが入っています。

引き続き次のデータを取得したい場合には、カーソルオブジェクトcontinue メソッドを行います。
次のデータが存在すれば、再度この onsuccess イベントが発生します。順次処理が進めば、指定の全てのデータの処理が行えます。

カーソルオブジェクトが「null」の場合は指定されたキー範囲(引数が無ければ全データが対象ですが)の全てのデータの取得が終わったことを示します。

■簡単な openCursor メソッドとカーソルオブジェクトの continue メソッドの利用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - cursor - 1</title>
<script type="text/javascript">
//  ブラウザ対応宣言
window.indexedDB      = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange    = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 
//  データベース(IDBDatabase)インスタンス
var db;
//  データベース名
var dbName = "TestDB";
//  オブジェクトストア名
var objStoreName = "Test1";
 
/**
 *  DB接続処理
 */
function openDB() {
    //  データベースオープン:[名称:TestDB]
    var request = indexedDB.open(dbName);
    //オープンが正常の場合の関数宣言
    request.onsuccess = function(event) {
        //データベースインスタンス保存
        db = event.target.result;
        console.log("DBオープンOK");
    };
    //エラーの場合の関数宣言
    request.onerror = function(event){
        console.log("DBオープンエラー");
    };
}
/**
 *  全データ取得処理
 */
function getAllData() {
    //トランザクション
    var transaction = db.transaction(objStoreName, 'readonly');
    //オブジェクトストアにアクセスします。
    var objectStore = transaction.objectStore(objStoreName);
    //カーソル開始
    var request = objectStore.openCursor();
    //カーソルで対応するデータが存在した場合の処理
    request.onsuccess = function(event) {
        var cursor = event.target.result;
        if(cursor) {
            console.log('データ:', cursor.value);
            //次のカーソルへ
            cursor.continue();
        } else {
            //これ以上のデータは存在しない
            console.log('データ終了');
        }
    };
    //カーソル取得エラーの場合の関数宣言
    request.onerror = function(event) {
        console.log('取得失敗。event:', event);
    };
}
</script>
</head>
<body>
    <h2>test IndexedDB - cursor - 1</h2>
    <button id="buttonOpen" onclick="openDB()">DBオープン</button>
    <button id="buttonGet"  onclick="getAllData()">全データ取得</button>
    <br />
</body>
</html>


「DBオープン」ボタンをクリック後 「全データ取得」ボタンをクリックすると、 ブラウザの「ウエブ開発ツール」のコンソールに順次データレコードの内容が表示され、最後に「データ終了」が表示されるのが分かります(下図参照)。


上の例では openCursor メソッドの引数を指定していないので「オブジェクトストア」内の全データが返されます。


openCursor メソッドにキー範囲とカーソル移動方向("next":昇順)の指定


getAll メソッドの時と同様に openCursor メソッドにキー範囲指定、およびカーソル移動方向を昇順指定を行い、結果を見てみます。
キー範囲は IDBKeyRange オブジェクトを使います。以下の例ではキーが '01' ~ '22' の範囲指定で、カーソル移動方向は 'next' を指定しています。 ('next' はデフォルトなので指定しなくても 'next' になります。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - cursor - 2</title>
<script type="text/javascript">
//  ブラウザ対応宣言
window.indexedDB      = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange    = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 
//  データベース(IDBDatabase)インスタンス
var db;
//  データベース名
var dbName = "TestDB";
//  オブジェクトストア名
var objStoreName = "Test1";
 
/**
 *  DB接続処理
 */
function openDB() {
    //  データベースオープン:[名称:TestDB]
    var request = indexedDB.open(dbName);
    //オープンが正常の場合の関数宣言
    request.onsuccess = function(event) {
        //データベースインスタンス保存
        db = event.target.result;
        console.log("DBオープンOK");
    };
    //エラーの場合の関数宣言
    request.onerror = function(event){
        console.log("DBオープンエラー");
    };
}
/**
 *  全データ取得処理
 */
function getAllData() {
    //トランザクション
    var transaction = db.transaction(objStoreName, 'readonly');
    //オブジェクトストアにアクセスします。
    var objectStore = transaction.objectStore(objStoreName);
    //キーの範囲指定オブジェクト
    var query = IDBKeyRange.bound('01', '22');  //キー範囲:'01'~'22'
    //カーソル開始
    var request = objectStore.openCursor(query, 'next');    //キーの範囲指定、カーソル移動方向指定
    //カーソルで対応するデータが存在した場合の処理
    request.onsuccess = function(event) {
        var cursor = event.target.result;
        if(cursor) {
            console.log('データ:', cursor.value);
            //次のカーソルへ
            cursor.continue();
        } else {
            //これ以上のデータは存在しない
            console.log('データ終了');
        }
    };
    //カーソル取得エラーの場合の関数宣言
    request.onerror = function(event) {
        console.log('取得失敗。event:', event);
    };
}
</script>
</head>
<body>
    <h2>test IndexedDB - cursor - 2</h2>
    <button id="buttonOpen" onclick="openDB()">DBオープン</button>
    <button id="buttonGet"  onclick="getAllData()">全データ取得</button>
    <br />
</body>
</html>


「DBオープン」ボタンをクリック後 「全データ取得」ボタンをクリックすると、 ブラウザの「ウエブ開発ツール」のコンソールににキーの昇順で順次データレコードの内容が表示され、最後に「データ終了」が表示されるのが分かります(下図参照)。



openCursor メソッドにキー範囲とカーソル移動方向("prev":降順)の指定


getAll メソッドの時と同様に openCursor メソッドにキー範囲指定、およびカーソル移動方向を降順指定を行い、結果を見てみます。
キー範囲は IDBKeyRange オブジェクトを使います。以下の例ではキーが '01' ~ '22' の範囲指定で、カーソル移動方向は 'prev' を指定しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - cursor - 3</title>
<script type="text/javascript">
//  ブラウザ対応宣言
window.indexedDB      = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange    = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 
//  データベース(IDBDatabase)インスタンス
var db;
//  データベース名
var dbName = "TestDB";
//  オブジェクトストア名
var objStoreName = "Test1";
 
/**
 *  DB接続処理
 */
function openDB() {
    //  データベースオープン:[名称:TestDB]
    var request = indexedDB.open(dbName);
    //オープンが正常の場合の関数宣言
    request.onsuccess = function(event) {
        //データベースインスタンス保存
        db = event.target.result;
        console.log("DBオープンOK");
    };
    //エラーの場合の関数宣言
    request.onerror = function(event){
        console.log("DBオープンエラー");
    };
}
/**
 *  全データ取得処理
 */
function getAllData() {
    //トランザクション
    var transaction = db.transaction(objStoreName, 'readonly');
    //オブジェクトストアにアクセスします。
    var objectStore = transaction.objectStore(objStoreName);
    //キーの範囲指定オブジェクト
    var query = IDBKeyRange.bound('01', '22');  //キー範囲:'01'~'22'
    //カーソル開始
    var request = objectStore.openCursor(query, 'prev');    //キーの範囲指定、カーソル移動方向指定
    //カーソルで対応するデータが存在した場合の処理
    request.onsuccess = function(event) {
        var cursor = event.target.result;
        if(cursor) {
            console.log('データ:', cursor.value);
            //次のカーソルへ
            cursor.continue();
        } else {
            //これ以上のデータは存在しない
            console.log('データ終了');
        }
    };
    //カーソル取得エラーの場合の関数宣言
    request.onerror = function(event) {
        console.log('取得失敗。event:', event);
    };
}
</script>
</head>
<body>
    <h2>test IndexedDB - cursor - 3</h2>
    <button id="buttonOpen" onclick="openDB()">DBオープン</button>
    <button id="buttonGet"  onclick="getAllData()">全データ取得</button>
    <br />
</body>
</html>


「DBオープン」ボタンをクリック後 「全データ取得」ボタンをクリックすると、 ブラウザの「ウエブ開発ツール」のコンソールにキーの降順で順次データレコードの内容が表示され、最後に「データ終了」が表示されるのが分かります(下図参照)。



関連する記事

JavaScript IndexedDB の使い方1(データベースオープン)
JavaScript IndexedDB の使い方2(データ追加)
JavaScript IndexedDB の使い方3(データ取得)
JavaScript IndexedDB の使い方4(全データ取得)
JavaScript IndexedDB の使い方5(カーソル処理)
JavaScript IndexedDB の使い方6(データ削除)
share











PR

コメント

コメントを書く