コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > H5 での IndexedDB データベースの使用方法の詳細な説明

H5 での IndexedDB データベースの使用方法の詳細な説明

Y2J
リリース： 2017-05-22 13:36:00
オリジナル
3569 人が閲覧しました

この記事では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('数据库已关闭');
}
ログイン後にコピー

データベースの削除

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

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 つのパラメーターを受け取ります。最初のパラメーターは string または array であり、配列はオブジェクト ウェアハウス トランザクション名で構成される配列です。パラメーターの倉庫を操作できます。 2 番目のパラメーターは Transaction Mode です。 readonly が渡されると、オブジェクト ウェアハウスでは読み取り操作のみが実行でき、書き込み操作は実行できません。 Readwrite は、読み取りおよび書き込み操作に渡すことができます。

操作データ

  1. add(): データを追加します。オブジェクト ウェアハウスに保存する必要があるオブジェクトであるパラメーターを受け取ります。

  2. put() : データを追加または変更します。オブジェクト ウェアハウスに保存する必要があるオブジェクトであるパラメーターを受け取ります。

  3. get() : データを取得します。取得するデータの主キー値であるパラメータを受け取ります。

  4. 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. Javacript免费视频教程

2. 为什么现在HTML5的优势越来越大

3. li inside-block在IE11换行无效的原因

4. 如何在网站上添加谷歌定位信息

5. 对HTML5中表单新增属性的分析

以上がH5 での IndexedDB データベースの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
html5 indexeddb データベースの削除 例
ソース：php.cn
前の記事：HTML5 が今、ますますメリットを獲得している理由 次の記事：PhoneGap を使用したデータベースの操作に関する詳細なチュートリアル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート