Stockage local HTML5 IndexedDB

Cet article présente principalement le stockage local IndexedDB de HTML5, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

IndexedDB est une API de bas niveau pour les clients. Le client stocke 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 ensemble

IndexedDB est une API de bas niveau utilisée par les clients pour stocker de grandes quantités de données structurées. donné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éez ou ouvrez la 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 avec différents navigateurs, nous avons donc besoin d'une fonction de compatibilité pour être compatible avec indexedDB.

2. Fonction de rappel pour se connecter à 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 demande sera être surveillé Trois statuts :

• succès : Succès de l'ouverture ou de la création de la base de données

• erreur : Échec de l'ouverture ou de la création de la base de données

• mise à niveau nécessaire : 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) passe à cet état. 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 créer un ObjectStore en utilisant la méthode suivante

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. Vérification des ajouts, suppressions et modifications 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);

Contrôle des ajouts, suppressions et modifications de la base de données :

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

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

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois. !

Recommandations associées :

Plusieurs méthodes de stockage du HTML5 front-end

H5 Analyse de la méthode d'adaptation de la disposition REM mobile pour la page d'activité

Méthode de détection d'écran horizontale et verticale H5

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!