html5에서 indexedDB를 작동하는 방법-H5 튜토리얼-php.cn

html5에서 indexedDB를 작동하는 방법

php中世界最好的语言

풀어 주다： 2018-01-10 09:40:41

원래의

2139명이 탐색했습니다.

이번에는 html5에서 indexedDB를 어떻게 운용하는지, html5를 사용하여 indexedDB를 운용할 때 주의사항은 무엇인지 알려드리겠습니다. 다음은 실제 사례를 살펴보겠습니다.

indexedDB는 대량의 구조화된 데이터를 저장하는 API입니다. 데모에서는 비동기 API가 사용됩니다. 문제는 API에 익숙하다면 indexedDB의 모든 작업이 비동기 '요청'을 생성한다는 것입니다. 작동이 매우 간단합니다.

일반적인 프로세스는 다음과 같습니다

1. 데이터베이스를 엽니다

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

로그인 후 복사

이것은 데이터베이스를 생성/연결합니다

2. 대화형 개체 만들기 && domevents && 데이터 처리

그런 다음 데이터베이스를 작동할 차례입니다.

//插入数据 暂时只插入一列    
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>

로그인 후 복사

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요!