Indexeddb データベースの使用方法の詳細な説明-H5 チュートリアル-php.cn

今回は、indexeddb データベースの使用方法について詳しく説明します。次に、indexeddb データベースを使用する際の注意事項について説明します。

はじめに

HTML5のローカルストレージには、クライアント上にローカルに保存されるNoSQLデータベースである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('数据库已关闭');
}

ログイン後にコピー

データベースの削除

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

ログイン後にコピー

オブジェクトの作成warehouse

オブジェクトストア(オブジェクトウェアハウス)は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 属性は主キーであり、データベーステーブルの主キーとしての id に相当します。 autoIncrement 属性が false の場合、主キーの値は自動的に増加せず、データを追加するときに主キーの値を指定する必要があることを意味します。

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

インデックスの作成

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 オブジェクトのトランザクションメソッドを使用して、読み取り専用トランザクションまたは読み取り/書き込みトランザクションを開始できます。

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 つのパラメーターを受け取ります。最初のパラメーターは文字列または配列であり、配列の場合はオブジェクトウェアハウス名で構成される配列です。任意のオブジェクトウェアハウスを操作できます。 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 方法的第二个参数表示游标的读取方向，主要有以下几种：

next : 游标中的数据按主键值升序排列，主键值相等的数据都被读取
nextunique : 游标中的数据按主键值升序排列，主键值相等只读取第一条数据
prev : 游标中的数据按主键值降序排列，主键值相等的数据都被读取
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();

ログイン後にコピー

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！