Maison >interface Web >Tutoriel H5 >Comment faire fonctionner indexedDB en HTML5

Comment faire fonctionner indexedDB en HTML5

php中世界最好的语言original: 2018-01-10 09:40:412206parcourir

Cette fois, je vais vous montrer comment faire fonctionner indexedDB en html5, et quelles sont les précautions pour faire fonctionner indexedDB en html5. Ce qui suit est un cas pratique, jetons un coup d'œil.

indexedDB est une API qui stocke une grande quantité de données structurées. L'API asynchrone est utilisée dans la démo. Le problème est que toutes les opérations sur indexedDB généreront une « requête » asynchrone. avec l'API, c'est facile à utiliser.

Le processus général est le suivant

1 Ouvrir la base de données

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;   
  
if (&#39;webkitIndexedDB&#39; in window) {   
    window.IDBTransaction = window.webkitIDBTransaction;   
    window.IDBKeyRange = window.webkitIDBKeyRange;   
}   
//这个就不解释了   
  
var request = indexedDB.open("adsageIDB");  //open  ： indexedDB只有这一个方法  打开（数据库名）   
request.onsuccess = function(e) { //异步   
    var v = "1.00";   
    var db = e.target.result;   
  
    if (v!= db.version) {   
        var setVrequest = db.setVersion(v);   
        setVrequest.onsuccess = function(e) { //异步   
            if(db.objectStoreNames.contains("todo")) {   
                db.deleteObjectStore("todo");   
            }   
            var store = db.createObjectStore("todo", {keyPath: "adsid"});//onsuccess 后创建ObjectStore  暂时用到两个参数，数据库&&主键   
        }   
    }       
}

Cela crée/connecte une base de données

2. Créer des objets interactifs &&. auditeurs domÉvénement && Données de traitement

Ensuite, il est temps d'exploiter la base de données

//插入数据 暂时只插入一列    
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);//创建transaction    
var store = trans.objectStore("todo");//创建Store   
//要操作数据必须建立transaction 和 Store   
  
var data = {   
    "text": todoText,   
    "adsid": new Date().getTime()   
};//一个小数据 adsid是主键   
  
var request = store.put(data); //‘强行’插入   
  
request.onsuccess = function(e) {   
    //成功后执行一些操作   
};   
  
request.onerror = function(e) {   
    console.log("Error Adding: ", e);   
};  
//读取数据   
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);   
var store = trans.objectStore("todo");   
  
var keyRange = IDBKeyRange.lowerBound(0);   
var cursorRequest = store.openCursor(keyRange);   
//这里用到指针cursor ,openCursor的参数 keyRange是遍历范围 还可以添加遍历方向参数   
//另一种方法是get() 这个就比较简单了直接store.get(&#39;键值&#39;)就行   
  
cursorRequest.onsuccess = function(e) {   
    var result = e.target.result;   
    if(!!result == false)   
    return;   
  
    console.log(result.value);   
    result.continue(); //循环读取所有数据   
};  
//删除数据   
...   
store.delete(&#39;键值&#39;)   
...  
<!DOCTYPE html>  
<html>  
  <head>  
    <script>  
      var indexedDB = window.indexedDB || window.webkitIndexedDB ||   
                      window.mozIndexedDB;   
         
      if (&#39;webkitIndexedDB&#39; in window) {   
        windowwindow.IDBTransaction = window.webkitIDBTransaction;   
        windowwindow.IDBKeyRange = window.webkitIDBKeyRange;   
      }   
         
      adsageIDB = {};   
      adsageIDB.db = null;   
         
      adsageIDB.onerror = function(e) {   
        console.log(e);   
      };   
         
      adsageIDB.open = function() {   
        var request = indexedDB.open("adsageIDB");   
         
        request.onsuccess = function(e) {   
          var v = "1.00";   
          adsageIDB.db = e.target.result;   
          var db = adsageIDB.db;   
  
          if (v!= db.version) {   
            var setVrequest = db.setVersion(v);   
         
            setVrequest.onerror = adsageIDB.onerror;   
            setVrequest.onsuccess = function(e) {   
              if(db.objectStoreNames.contains("todo")) {   
                db.deleteObjectStore("todo");   
              }   
         
              var store = db.createObjectStore("todo",   
                {keyPath: "adsid"});   
         
              adsageIDB.getAllTodoItems();   
            };   
          }   
          else {   
            adsageIDB.getAllTodoItems();   
          }   
        };   
         
        request.onerror = adsageIDB.onerror;   
      }   
         
      adsageIDB.addTodo = function(todoText) {   
        var db = adsageIDB.db;   
        var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);   
        var store = trans.objectStore("todo");   
         
        var data = {   
          "text": todoText,   
          "adsid": new Date().getTime()   
        };   
         
        var request = store.put(data);   
         
        request.onsuccess = function(e) {   
          adsageIDB.getAllTodoItems();   
        };   
         
        request.onerror = function(e) {   
          console.log("Error Adding: ", e);   
        };   
      };   
         
      adsageIDB.deleteTodo = function(id) {   
        var db = adsageIDB.db;   
        var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);   
        var store = trans.objectStore("todo");   
         
        var request = store.delete(id);   
         
        request.onsuccess = function(e) {   
          adsageIDB.getAllTodoItems();   
        };   
         
        request.onerror = function(e) {   
          console.log("Error Adding: ", e);   
        };   
      };   
         
      adsageIDB.getAllTodoItems = function() {   
        var todos = document.getElementById("todoItems");   
        todos.innerHTML = "";   
         
        var db = adsageIDB.db;   
        var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);   
        var store = trans.objectStore("todo");   
         
        var keyRange = IDBKeyRange.lowerBound(0);   
        var cursorRequest = store.openCursor(keyRange);   
         
        cursorRequest.onsuccess = function(e) {   
          var result = e.target.result;   
          if(!!result == false)   
            return;   
         
          renderTodo(result.value);   
          result.continue();   
        };   
         
        cursorRequest.onerror = adsageIDB.onerror;   
      };   
         
      function renderTodo(row) {   
        var todos = document.getElementById("todoItems");   
        var li = document.createElement("li");   
        var a = document.createElement("a");   
        var t = document.createTextNode(row.text);   
         
        a.addEventListener("click", function() {   
          adsageIDB.deleteTodo(row.adsid);   
        }, false);   
         
        a.textContent = " [删除]";   
        li.appendChild(t);   
        li.appendChild(a);   
        todos.appendChild(li)   
      }   
         
      function addTodo() {   
        var todo = document.getElementById("todo");   
        adsageIDB.addTodo(todo.value);   
        todo.value = "";   
      }   
         
      function init() {   
        adsageIDB.open();   
      }   
         
      window.addEventListener("DOMContentLoaded", init, false);   
    </script>  
  </head>  
  <body>  
    <ul id="todoItems"></ul>  
    <input type="text" id="todo" name="todo" placeholder="adsageIDB text?" />  
    <input type="submit" value="增加一个 IDB" onclick="addTodo(); return false;"/>  
  </body>  
</html>

Je crois que vous maîtrisez la méthode après avoir lu ces cas. Pour des choses plus passionnantes. , veuillez faire attention à php Chinois Autres articles connexes en ligne !

Lecture connexe :

12 conseils de conception impopulaires du H5

Introduction détaillée à l'interface générale du H5

Comment dessiner une étoile à cinq branches en 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!

php html5 接口对象事件 dom 异步数据库

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quelles sont les nouvelles fonctionnalités interactives du H5 et du C3 ?Article suivant：Quelles sont les nouvelles fonctionnalités interactives du H5 et du C3 ?

Articles Liés

Voir plus