Home > Article > Web Front-end > How to operate indexedDB in html5

How to operate indexedDB in html5

php中世界最好的语言Original: 2018-01-10 09:40:412103browse

This time I will show you how to operate indexedDB in html5, and what are the precautions for operating indexedDB in html5. The following is a practical case, let's take a look.

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 generate an asynchronous 'request'. As long as you are familiar with the API, it is easy to operate. Simple.

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&& monitor dom

Event && Processing 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;)   
...  
<!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>

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website !

How to operate indexedDB in html5

Related articles