base de données indexéeDB

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 NoSQL stockée localement sur le client qu'elle peut 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 se 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, le second est le numéro de version de la base de données. Cette méthode renverra un IDBOpenDBRequest object, 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 indexedDB API 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 un nouveau numéro de version dans la méthode indexedDB.open Mettez à jour la version pour éviter les 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 l'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 Base de données

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

Créer un objetWarehouse

object (entrepôt d'objets) est la base de la base de données indexedDB et n'existe pas dans La table de base de données indexedDB et l'entrepôt d'objets sont équivalents à 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 et le deuxième paramètre est le disponible Sélectionnez les paramètres, 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 attribut de l'objet de données Lors de la récupération dans la base de données, vous ne pouvez utiliser que l'ensemble d'attributs. comme index de recherche.

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'objet de données Attributs. Dans l'exemple ci-dessus, l'attribut userName est utilisé pour créer l'index. Le troisième paramètre est un paramètre facultatif et 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 sur les 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 transactionaction de l'objet IDBOpenDBRequest pour démarrer une transaction en lecture seule ou une transaction en lecture-écriture.

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('事务被中止了');
    }}

La méthode db.transaction reçoit deux paramètres, le premier paramètre peut être une string Ou array, lorsqu'une chaîne est un nom d'entrepôt d'objets, lorsqu'un tableau est un tableau composé de noms d'entrepôt 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.

操作数据

• 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，默认都为falsevar boundRange = IDBKeyRange.bound(1, 10, false, false);// onlyRange 表示由一个主键值的集合。only() 参数则为主键值，整数类型。var onlyRange = IDBKeyRange.only(1);// lowerRaneg 表示大于等于1的主键值的集合。// 第二个参数可选，为true则表示不包含最小主键1，false则包含，默认为falsevar lowerRange = IDBKeyRange.lowerBound(1, false);// upperRange 表示小于等于10的主键值的集合。// 第二个参数可选，为true则表示不包含最大主键10，false则包含，默认为falsevar 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();

总结

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

更多文章：lin-xin/blog

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!