html5, essayez d'abord indexedDB (recommandé)-Tutoriel H5-php.cn

html5, essayez d'abord indexedDB (recommandé)

黄舟

Libérer： 2017-02-20 13:24:43

original

1452 Les gens l'ont consulté

indexedDB est une API qui stocke de grandes quantités 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 entraîneront une « requête » asynchrone. , c'est très simple à utiliser.

Le processus général est le suivant

1 Ouvrez 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  暂时用到两个参数，数据库&&主键   

            }   

        }       

    }

Copier après la connexion

.

De cette façon, une base de données est créée/connectée

2. Créer des objets interactifs&& écouter les événements dom&& traiter les données

Ensuite, il est temps de faire fonctionner 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);   

    };

Copier après la connexion

//读取数据   

    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(); //循环读取所有数据   

    };

Copier après la connexion

//删除数据   

    ...   

    store.delete(&#39;键值&#39;)   

    ...

Copier après la connexion

est sorti Une petite démo

<!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>

Copier après la connexion

L'article ci-dessus sur le premier essai html5 indexedDB (recommandé) est tout le contenu partagé par l'éditeur, J'espère que cela pourra vous donner une référence, pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !