Home > Article > Web Front-end > html5 first try indexedDB (recommended)

html5 first try indexedDB (recommended)

黄舟Original: 2017-02-20 13:24:431380browse

indexedDB is an API that stores a large amount of structured data. The asynchronous API is used in the demo. The trouble is that all operations on indexedDB will cause an asynchronous 'request'. As long as you are familiar with the API, it is very simple to operate.

The general process is like this

1. Open the database

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

            }   

        }       

    }

This creates/connects a database

2. Create interactive objects&& listen to dom events&& process data

Then it’s time to operate the database

//插入数据 暂时只插入一列    

    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;)   

    ...

A small demo

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

The above article about html5 first try indexedDB (recommended) is all the content shared by the editor. I hope it can give you a reference. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：H5 of 13__CSS transitions, animations and transformationsNext article：H5 of 13__CSS transitions, animations and transformations

See more

html5 first try indexedDB (recommended)

Related articles