Explication détaillée de la façon d'utiliser la base de données indexedDB dans H5

Cet article présente principalement les exemples d'utilisation de la base de données indexedDB en HTML5. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Avant-propos

Dans le stockage local de HTML5, il existe une base de données appelée indexedDB, qui est une base de données stockée sur le client . Une base de données NoSQL locale pouvant stocker de grandes quantités de données. D'après l'article précédent : HTML5 Advanced Series : Web Storage, nous savons que le stockage Web peut accéder localement à des données simples de manière pratique et flexible, mais pour une grande quantité de stockage structuré, les avantages d'indexedDB sont encore plus évidents. Voyons ensuite comment indexedDB stocke les données.

Se connecter à la base de données

Un site Web peut avoir plusieurs bases de données indexées DB, mais le nom de chaque base de données est unique. Nous devons nous connecter à une base de données spécifique via le nom de la base de données.

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

Nous utilisons la méthode indexedDB.open pour nous connecter à la base de données. Cette méthode reçoit deux paramètres, le premier est le nom de la base de données et le second est le numéro de version de la base de données. Cette méthode renvoie un objet IDBOpenDBRequest, représentant un objet de requête pour se connecter à la base de données. Nous pouvons définir les méthodes à exécuter si la connexion réussit ou échoue en écoutant les événements onsuccess et onerror de l'objet requête.

Étant donné que l'API indexedDB ne permet pas à l'entrepôt de données de la base de données de changer dans la même version, vous devez transmettre le nouveau numéro de version dans la méthode indexedDB.open à mettre à jourVersion pour éviter des modifications répétées de la base de données dans la même version. Le numéro de version doit être un entier !

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

Nous définissons la méthode à exécuter lors de la mise à jour de la version de la base de données en écoutant l'événement onupgradeneeded de l'objet requête.

Fermez la base de données

Après une connexion réussie à la base de données à l'aide de indexedDB.open, un objet IDBOpenDBRequest sera renvoyé Nous pouvons appeler la méthode close de cet objet pour fermer. la base de données.

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

Supprimer la base de données

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

Créer un objetEntrepôt

magasin d'objets( L'entrepôt d'objets) constitue la base de la base de données indexedDB. Il n'y a pas de table de base de données dans indexedDB et l'entrepôt d'objets est équivalent à une table de base de données.

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('创建对象仓库成功');
}

La méthode db.createObjectStore reçoit deux paramètres, le premier est le nom de l'entrepôt d'objets, le deuxième paramètre est un paramètre facultatif et la valeur est un objet js. L'attribut keyPath dans cet objet est la clé primaire, ce qui équivaut à id étant la clé primaire dans la table de base de données. Si l'attribut autoIncrement est faux, cela signifie que la valeur de la clé primaire n'augmentera pas automatiquement et que la valeur de la clé primaire doit être spécifiée lors de l'ajout de données.

Remarque : dans la base de données, le nom de l'entrepôt d'objets ne peut pas être répété, sinon le navigateur signalera une erreur.

Créer index

indexedDB Dans la base de données, un index est créé via un certain attribut de l'objet de données lors de la récupération dans la base de données, il ne peut être récupéré que via L'attribut défini comme index est récupéré.

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('创建索引成功');
}

La méthode store.createIndex reçoit trois paramètres. Le premier est le nom de l'index et le second est l'attribut de l'objet de données. Dans l'exemple ci-dessus, l'attribut userName est utilisé pour créer l'index. . Le troisième paramètre est les paramètres Select, la valeur est un objet js. L'attribut unique de cet objet est vrai, ce qui signifie que les valeurs d'index ne peuvent pas être les mêmes, c'est-à-dire que le nom d'utilisateur des deux données ne peut pas être le même, et s'il est faux, ils peuvent être les mêmes.

Basé sur les transactions

Dans indexedDB, toutes les opérations de données ne peuvent être effectuées qu'au sein des transactions. Après vous être connecté avec succès à la base de données, vous pouvez utiliser la méthode de transaction de l'objet IDBOpenDBRequest pour démarrer une transaction en lecture seule ou une transaction en lecture-écriture. La méthode

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 reçoit deux paramètres. Le premier paramètre peut être string ou array. S'il s'agit d'une chaîne, il s'agit d'un entrepôt d'objets. name , lorsque le tableau est un tableau composé de noms d'entrepôts d'objets, la transaction peut opérer sur n'importe quel entrepôt d'objets dans le paramètre. Le deuxième paramètre est Mode de transaction Lorsque la lecture seule est transmise, seules les opérations de lecture peuvent être effectuées sur l'entrepôt d'objets et les opérations d'écriture ne peuvent pas être effectuées. Readwrite peut être transmis pour les opérations de lecture et d'écriture.

Données d'opération

1. add() : Ajouter des données. Reçoit un paramètre, qui est l'objet qui doit être enregistré dans l'entrepôt d'objets.

2. put() : Ajouter ou modifier des données. Reçoit un paramètre, qui est l'objet qui doit être enregistré dans l'entrepôt d'objets.

3. get() : Obtenez des données. Reçoit un paramètre, qui est la valeur de clé primaire des données à obtenir.

4. delete() : Supprimer les données. Reçoit un paramètre, qui est la valeur de clé primaire des données à obtenir.

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中表单新增属性的分析

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!