Stockage local HTML5 IndexedDB-Tutoriel H5-php.cn

Stockage local HTML5 IndexedDB

巴扎黑

Libérer： 2017-08-08 16:15:33

original

1704 Les gens l'ont consulté

IndexedDB est une API de bas niveau pour le stockage côté client de grandes quantités de données structurées (y compris des fichiers/blobs). L'article suivant se concentrera sur vous présenter les connaissances pertinentes d'IndexedDB pour le stockage local HTML5. Les amis intéressés devraient y jeter un œil

IndexedDB est une API de bas niveau utilisée pour le stockage côté client de grandes quantités de fichiers. données structurées (y compris les fichiers/blobs). L'API utilise des index pour permettre des recherches hautes performances sur ces données.

Récemment, il y a une exigence commerciale, qui consiste à stocker des données hors ligne et à télécharger des formulaires et des images lorsqu'il y a un signal réseau. J'ai donc étudié IndexedDB de HTML5.

Pour la nécessité de stocker uniquement certains champs, vous pouvez utiliser le stockage local et le stockage de session. Mais une fois qu’une grande quantité de données est stockée, le stockage local et le stockage de session sont loin de répondre aux besoins. À ce stade, la puissance d’IndexedDB sera reflétée.

1. Créer ou ouvrir une base de données

/* 对不同浏览器的indexedDB进行兼容 */
const indexeddb = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
/* 创建或连接数据库 */
const request = indexeddb.open(name, version);  // name：数据库名，version：数据库版本号

Copier après la connexion

Parce qu'indexedDB a une compatibilité sur différents navigateurs, nous avons une fonction de compatibilité. devait être compatible avec indexedDB.

2. Fonction de rappel pour se connecter à la base de données

request.addEventListener(&#39;success&#39;, function(event){ 
    // 打开或创建数据库成功
}, false);
request.addEventListener(&#39;error&#39;, function(event){ 
    // 打开或创建数据库失败
}, false);
request.addEventListener(&#39;upgradeneeded&#39;, function(event){ 
    // 更新数据库时执行
}, false);

Copier après la connexion

Après la connexion à la base de données, la demande surveillera trois états :

succès : ouverture ou création réussie de la base de données
erreur : échec de l'ouverture ou de la création de la base de données
upgradeneeded : Mettre à jour la base de données

L'état de mise à niveau nécessaire ne peut être surveillé que lorsque indexedDB crée une nouvelle base de données et lorsque la version indexeddb.open(name, version) (numéro de version de la base de données) change. Cet état ne sera pas déclenché lorsque le numéro de version ne change pas. La création et la suppression de l'ObjectStore de la base de données sont toutes exécutées sous cet événement d'écoute.

3. Créer et supprimer ObjectStore

Dans indexedDB, ObjectStore est similaire à une table de base de données.

request.addEventListener(&#39;upgradeneeded&#39;, function(event){ 
    // 创建数据库实例
    const db = event.target.result;
    // 关闭数据库
    db.close();
    // 判断是否有ObjectStore
    db.objectStoreNames.contains(objectStoreName);
    // 删除ObjectStore
    db.deleteObjectStore(objectStoreName);
}, false);

Copier après la connexion

Vous pouvez utiliser la méthode suivante pour créer un ObjectStore

request.addEventListener(&#39;upgradeneeded&#39;, function(event){ 
    // 创建数据库实例
    const db = event.target.result;
    // 判断是否有ObjectStore
    if(!db.objectStoreNames.contains(objectStoreName)){
        const store = db.createObjectStore(objectStoreName, {
            keyPath: keyPath  // keyPath 作为ObjectStore的搜索关键字
        });
        // 为ObjectStore创造索引
        store.createIndex(name,    // 索引
                          index,   // 键值
                          {
                              unique: unique  // 索引是否唯一
                          });
    }
}, false);

Copier après la connexion

4 . Données Ajouter, supprimer, modifier et interroger

request.addEventListener(&#39;success&#39;, function(event){ 
    // 创建数据库实例
    const db = event.target.result;
    // 查找一个ObjectStore
    db.transaction(objectStoreName, wa);
    // wa为&#39;readwrite&#39;时，数据可以读写 
    // wa为&#39;readonly&#39;时，数据只读
    const store = transaction.objectStore(objectStoreName);
}, false);

Copier après la connexion

Ajouter, supprimer, modifier et interroger une base de données :

// 添加数据，当关键字存在时数据不会添加
store.add(obj);
// 更新数据，当关键字存在时覆盖数据，不存在时会添加数据
store.put(obj);
// 删除数据，删除指定的关键字对应的数据
store.delete(value);
// 清除ObjectStore
store.clear();
// 查找数据，根据关键字查找指定的数据
const g = store.get(value);
g.addEventListener(&#39;success&#39;, function(event){
    // 异步查找后的回调函数
}, false);

Copier après la connexion

Par index Rechercher des données

const index = store.index(indexName);
const cursor = index.openCursor(range);
cursor.addEventListener(&#39;success&#39;, function(event){
    const result = event.target.result;
    if(result){
        result.value       // 数据
        result.continue(); // 迭代，游标下移
    }
}, false);

Copier après la connexion

Rechercher des données par plage d'index

const index = store.index(indexName);
const cursor = index.openCursor(range);
/**
 * range为null时，查找所有数据
 * range为指定值时，查找索引满足该条件的对应的数据
 * range为IDBKeyRange对象时，根据条件查找满足条件的指定范围的数据
 */
// 大于或大于等于 
range = IDBKeyRange.lowerBound(value, true)   // (value, +∞)，>  value
range = IDBKeyRange.lowerBound(value, false)  // [value, +∞)，>= value
// 小于或小于等于，isOpen：true，开区间；false，闭区间
range = IDBKeyRange.upperBound(value, isOpen)
// 大于或大于等于value1，小于或小于等于value2
IDBKeyRange.bound(value1, value2, isOpen1, isOpen2)

Copier après la connexion

Enfin, j'en ai encapsulé un moi-même. Pour la bibliothèque indexedDB, vous pouvez vous référer à : duan602728596/IndexedDB

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!