HTML5 の IndexedDB データベースの関連紹介

この記事では主にHTML5におけるindexedDBデータベースの使用例を紹介していますが、編集者がとても良いと思ったので、参考として共有させていただきます。エディターをフォローして見てみましょう

はじめに

HTML5 のローカル ストレージには、indexedDB と呼ばれるデータベースがあり、クライアント上にローカルに保存される大量のデータを保存できます。前回の記事: HTML5 上級シリーズ: Web ストレージから、Web ストレージがローカルの単純なデータに便利かつ柔軟にアクセスできることがわかりましたが、大量の構造化ストレージの場合、indexedDB の利点はさらに明白です。次に、indexedDB がデータを保存する方法を見てみましょう。

データベースに接続

Web サイトには複数の IndexedDB データベースを含めることができますが、各データベースの名前は一意です。データベース名を使用して特定のデータベースに接続する必要があります。

var request = indexedDB.open('dbName', 1);  // 打开 dbName 数据库
request.onerror = function(e){              // 监听连接数据库失败时执行
    console.log('连接数据库失败');
}
request.onsuccess = function(e){            // 监听连接数据库成功时执行
    console.log('连接数据库成功');
}

indexedDB.open メソッドを使用してデータベースに接続します。このメソッドは 2 つのパラメーターを受け取ります。1 つ目はデータベース名、2 つ目はデータベースのバージョン番号です。このメソッドは、データベースに接続するためのリクエスト オブジェクトを表す IDBOpenDBRequest オブジェクトを返します。リクエスト オブジェクトの onsuccess イベントと onerror イベントをリッスンすることで、接続が成功または失敗した場合に実行されるメソッドを定義できます。

indexedDB API では、データベース内のデータ ウェアハウスを同じバージョンで変更することができないため、indexedDB.open メソッドで新しいバージョン番号を渡してバージョンを更新し、データベース内の変更が繰り返し行われないようにする必要があります。同じバージョン。バージョン番号は整数である必要があります。

var request = indexedDB.open('dbName', 2);  // 更新版本，打开版本为2的数据库
// ...
request.onupgradeneeded = function(e){
    console.log('新数据库版本号为=' + e.newVersion);
}

リクエストオブジェクトのonupgradeneededイベントをリッスンすることで、データベースのバージョンが更新されたときに実行されるメソッドを定義します。

データベースを閉じる

indexedDB.open を使用してデータベースに正常に接続すると、IDBOpenDBRequest オブジェクトが返され、オブジェクトの close メソッドを呼び出してデータベースを閉じることができます。

var request = indexedDB.open('dbName', 2);
// ...
request.onsuccess = function(e){
    console.log('连接数据库成功');
    var db = e.target.result;
    db.close();
    console.log('数据库已关闭');
}

Deletedatabase

indexedDB.deleteDatabase('dbName');
console.log('数据库已删除');

オブジェクトウェアハウスの作成

オブジェクトストア(オブジェクトウェアハウス)はindexedDBデータベースの基礎であり、indexedDBにはデータベーステーブルは存在せず、オブジェクトウェアハウスはデータベースに相当します。テーブル。

var request = indexedDB.open('dbName', 3);
// ...
request.onupgradeneeded = function(e){
    var db = e.target.result;
    var store = db.createObjectStore('Users', {keyPath: 'userId', autoIncrement: false});
    console.log('创建对象仓库成功');
}

db.createObjectStore メソッドは 2 つのパラメーターを受け取ります。最初のパラメーターはオブジェクト ウェアハウス名、2 番目のパラメーターはオプションのパラメーター、値は js オブジェクトです。このオブジェクトの keyPath attribute は主キーであり、データベース テーブルの主キーである id に相当します。 autoIncrement 属性が false の場合、主キーの値は自動的に増加せず、データを追加するときに主キーの値を指定する必要があることを意味します。

注: データベースでは、オブジェクト ウェアハウス名を繰り返すことはできません。繰り返さないと、ブラウザーによってエラーが報告されます。

Createindex

indexedDB データベース内で取得する場合、インデックスは、インデックスとして設定された属性を介してのみデータベース内に作成されます。

var request = indexedDB.open('dbName', 4);
// ...
request.onupgradeneeded = function(e){
    var db = e.target.result;
    var store = db.createObjectStore('newUsers', {keyPath: 'userId', autoIncrement: false});
    var idx = store.createIndex('usernameIndex','userName',{unique: false})
    console.log('创建索引成功');
}

store.createIndex メソッドは 3 つのパラメーターを受け取ります。1 つ目はインデックス名で、2 つ目はデータ オブジェクトの属性です。上記の例では、userName 属性がインデックスの作成に使用されます。値が 1 のオプションのパラメーター。このオブジェクトの unique 属性は true です。これは、インデックス値が同じであってはいけない、つまり 2 つのデータの userName が同じであってはいけないことを意味し、false の場合は同じであってもよいことを意味します。

トランザクションに基づく

IndexedDB では、すべてのデータ操作はトランザクション内でのみ実行できます。データベースに正常に接続したら、IDBOpenDBRequest オブジェクトの transaction メソッドを使用して、読み取り専用トランザクションまたは読み取り/書き込みトランザクションを開始できます。

var request = indexedDB.open('dbName', 5);
// ...
request.onupgradeneeded = function(e){
    var db = e.target.result;
    var tx = db.transaction('Users','readonly');
    tx.oncomplete = function(e){
        console.log('事务结束了');
    }
    tx.onabort = function(e){
        console.log('事务被中止了');
    }
}

db.transaction メソッドは 2 つのパラメーターを受け取ります。最初のパラメーターは、文字列の場合はオブジェクト ウェアハウス名、配列の場合は array です。オブジェクト ウェアハウス名で構成され、トランザクションはパラメータ内の任意のオブジェクト ウェアハウスで動作できます。 2 番目のパラメーターは Transaction Mode です。 readonly が渡されると、オブジェクト ウェアハウスでは読み取り操作のみが実行でき、書き込み操作は実行できません。 Readwrite は、読み取りおよび書き込み操作に渡すことができます。

操作データ

add(): データを追加します。オブジェクト ウェアハウスに保存する必要があるオブジェクトであるパラメーターを受け取ります。
put() : データを追加または変更します。オブジェクト ウェアハウスに保存する必要があるオブジェクトであるパラメーターを受け取ります。
get() : データを取得します。取得するデータの主キー値であるパラメータを受け取ります。
delete() : データを削除します。取得するデータの主キー値であるパラメータを受け取ります。

var request = indexedDB.open('dbName', 5);
// ...
request.onsuccess = function(e){
    var db = e.target.result;
    var tx = db.transaction('Users','readwrite');
    var store = tx.objectStore('Users');
    var value = {
        'userId': 1,
        'userName': 'linxin',
        'age': 24
    }
    var req1 = store.put(value);        // 保存数据
    var req2 = store.get(1);            // 获取索引userId为1的数据
    req2.onsuccess = function(){
        console.log(this.result.userName);  // linxin
    }
    var req3 = store.delete(1);             // 删除索引为1的数据
    req3.onsuccess = function(){
        console.log('删除数据成功');        // 删除数据成功
    }
}

add 和 put 的作用类似，区别在于 put 保存数据时，如果该数据的主键在数据库中已经有相同主键的时候，则会修改数据库中对应主键的对象，而使用 add 保存数据，如果该主键已经存在，则保存失败。

检索数据

上面我们知道使用 get() 方法可以获取数据，但是需要制定主键值。如果我们想要获取一个区间的数据，可以使用游标。游标通过对象仓库的 openCursor 方法创建并打开。

openCursor 方法接收两个参数，第一个是 IDBKeyRange 对象，该对象创建方法主要有以下几种：

// boundRange 表示主键值从1到10(包含1和10)的集合。
// 如果第三个参数为true，则表示不包含最小键值1，如果第四参数为true，则表示不包含最大键值10，默认都为false
var boundRange = IDBKeyRange.bound(1, 10, false, false);

// onlyRange 表示由一个主键值的集合。only() 参数则为主键值，整数类型。
var onlyRange = IDBKeyRange.only(1);

// lowerRaneg 表示大于等于1的主键值的集合。
// 第二个参数可选，为true则表示不包含最小主键1，false则包含，默认为false
var lowerRange = IDBKeyRange.lowerBound(1, false);

// upperRange 表示小于等于10的主键值的集合。
// 第二个参数可选，为true则表示不包含最大主键10，false则包含，默认为false
var upperRange = IDBKeyRange.upperBound(10, false);

openCursor 方法的第二个参数表示游标的读取方向，主要有以下几种：

1. next : 游标中的数据按主键值升序排列，主键值相等的数据都被读取

2. nextunique : 游标中的数据按主键值升序排列，主键值相等只读取第一条数据

3. prev : 游标中的数据按主键值降序排列，主键值相等的数据都被读取

4. prevunique : 游标中的数据按主键值降序排列，主键值相等只读取第一条数据

var request = indexedDB.open('dbName', 6);
// ...
request.onsuccess = function(e){
    var db = e.target.result;
    var tx = db.transaction('Users','readwrite');
    var store = tx.objectStore('Users');
    var range = IDBKeyRange.bound(1,10);
    var req = store.openCursor(range, 'next');
    req.onsuccess = function(){
        var cursor = this.result;
        if(cursor){
            console.log(cursor.value.userName);
            cursor.continue();
        }else{
            console.log('检索结束');
        }
    }
}

当存在符合检索条件的数据时，可以通过 update 方法更新该数据：

cursor.updata({
    userId : cursor.key,
    userName : 'Hello',
    age : 18
});

可以通过 delete 方法删除该数据：

cursor.delete();

可以通过 continue 方法继续读取下一条数据，否则读到第一条数据之后不再继续读取：

cursor.continue();

总结

从连接数据库，创建对象仓库、索引，到操作、检索数据，完成了 indexedDB 存取数据的完整流程。下面通过一个完整的例子来更好地掌握 indexedDB 数据库。代码地址：indexedDB-demo

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费h5在线视频教程

3. php.cn原创html5视频教程

以上がHTML5 の IndexedDB データベースの関連紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。