Stockage local H5 IndexedDB

Cette fois, je vous présente le stockage local IndexedDB de H5. Quelles sont les précautions lors de l'utilisation du stockage local IndexedDB de H5. Voici des cas pratiques, jetons un coup d'œil.

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'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 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：数据库版本号

Parce qu'indexedDB est compatible sur différents navigateurs, nous avons besoin de certaines fonctions de compatibilité pour être compatible avec indexedDB.

2. La fonction de rappel connectée à la base de données

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

Après la connexion à la base de données, la requête 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('upgradeneeded', function(event){ 
    // 创建数据库实例
    const db = event.target.result;
    // 关闭数据库
    db.close();
    // 判断是否有ObjectStore
    db.objectStoreNames.contains(objectStoreName);
    // 删除ObjectStore
    db.deleteObjectStore(objectStoreName);
}, false);

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

request.addEventListener('upgradeneeded', 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);

4. Ajout, suppression, modification et requête de données

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

Ajout de base de données Contrôle de suppression et de modification :

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

Rechercher les données par index

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

Rechercher les 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)

Enfin, j'ai encapsulé une bibliothèque indexedDB. Vous pouvez vous référer à : duan602728596/IndexedDB

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP. !

Lecture recommandée :

Téléchargement asynchrone du fichier H5

Correspondance dynamique de la zone de saisie de la liste de données et des données de la base de données d'arrière-plan

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!