来自 计算机教程 2019-11-24 18:28 的文章
当前位置: 美洲杯冠军竞猜 > 计算机教程 > 正文

HTML5 IndexedDB

};正如将数据 put到对象存储中的代码一样,删除数据也很简单。启动一个事务,通过对象引用对象存储,然后通过对象的唯一ID发出delete命令。

本文转自:http://www.html5rocks.com/zh/tutorials/indexeddb/todo/

    html5rocks.indexedDB.db = e.target.result;

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        color: #222;
        font: 14px Arial;
      }
      
      body a {
        color: #3D5C9D;
        text-decoration: none;
      }
    </style>
    <script>
      var html5rocks = {};
      window.indexedDB = window.indexedDB || window.webkitIndexedDB ||
                         window.mozIndexedDB;
      
      if ('webkitIndexedDB' in window) {
        window.IDBTransaction = window.webkitIDBTransaction;
        window.IDBKeyRange = window.webkitIDBKeyRange;
      }
      
      html5rocks.indexedDB = {};
      html5rocks.indexedDB.db = null;
      
      html5rocks.indexedDB.onerror = function(e) {
        console.log(e);
      };
      
      html5rocks.indexedDB.open = function() {
        var request = indexedDB.open("todos");
      
        request.onsuccess = function(e) {
          var v = 1;
          html5rocks.indexedDB.db = e.target.result;
          var db = html5rocks.indexedDB.db;
          // We can only create Object stores in a setVersion transaction;
          if (v != db.version) {
            var setVrequest = db.setVersion(v);
      
            // onsuccess is the only place we can create Object Stores
            setVrequest.onerror = html5rocks.indexedDB.onerror;
            setVrequest.onsuccess = function(e) {
              if(db.objectStoreNames.contains("todo")) {
                db.deleteObjectStore("todo");
              }
      
              var store = db.createObjectStore("todo",
                {keyPath: "timeStamp"});
              e.target.transaction.oncomplete = function() {
                html5rocks.indexedDB.getAllTodoItems();
              };
            };
          } else {
            request.transaction.oncomplete = function() {
              html5rocks.indexedDB.getAllTodoItems();
            };
          }
        };
        request.onerror = html5rocks.indexedDB.onerror;
      };
      
      html5rocks.indexedDB.addTodo = function(todoText) {
        var db = html5rocks.indexedDB.db;
        var trans = db.transaction(["todo"], "readwrite");
        var store = trans.objectStore("todo");
      
        var data = {
          "text": todoText,
          "timeStamp": new Date().getTime()
        };
      
        var request = store.put(data);
      
        request.onsuccess = function(e) {
          html5rocks.indexedDB.getAllTodoItems();
        };
      
        request.onerror = function(e) {
          console.log("Error Adding: ", e);
        };
      };
      
      html5rocks.indexedDB.deleteTodo = function(id) {
        var db = html5rocks.indexedDB.db;
        var trans = db.transaction(["todo"], "readwrite");
        var store = trans.objectStore("todo");
      
        var request = store.delete(id);
      
        request.onsuccess = function(e) {
          html5rocks.indexedDB.getAllTodoItems();
        };
      
        request.onerror = function(e) {
          console.log("Error Adding: ", e);
        };
      };
      
      html5rocks.indexedDB.getAllTodoItems = function() {
        var todos = document.getElementById("todoItems");
        todos.innerHTML = "";
      
        var db = html5rocks.indexedDB.db;
        var trans = db.transaction(["todo"], "readwrite");
        var store = trans.objectStore("todo");
      
        // Get everything in the store;
        var cursorRequest = store.openCursor();
      
        cursorRequest.onsuccess = function(e) {
          var result = e.target.result;
          if(!!result == false)
            return;
      
          renderTodo(result.value);
          result.continue();
        };
      
        cursorRequest.onerror = html5rocks.indexedDB.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() {
          html5rocks.indexedDB.deleteTodo(row.timeStamp);
        }, false);
      
        a.textContent = " [Delete]";
        li.appendChild(t);
        li.appendChild(a);
        todos.appendChild(li);
      }
      
      function addTodo() {
        var todo = document.getElementById("todo");
        html5rocks.indexedDB.addTodo(todo.value);
        todo.value = "";
      }
      
      function init() {
        html5rocks.indexedDB.open();
      }
      
      window.addEventListener("DOMContentLoaded", init, false);
    </script>
  </head>
  <body>
    <ul id="todoItems"></ul>
    <input type="text" id="todo" name="todo" placeholder="What do you need to do?" style="width: 200px;" />
    <input type="submit" value="Add Todo Item" onclick="addTodo(); return false;"/>
  </body>
</html>​

 

 

 

  var a = document.createElement("a");

[html]

var html5rocks = {};  html5rocks.indexedDB = {};  var html5rocks = {};

  var request = store.put({

    html5rocks.indexedDB.deleteTodo(row.text);

  var request = indexedDB.open("todos");

 

    html5rocks.indexedDB.getAllTodoItems();

  li.appendChild(a);

简介

    // Do some more stuff in a minute

 

html5rocks.indexedDB.deleteTodo = function(id) {    var db = html5rocks.indexedDB.db;    var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE, 0);    var store = trans.objectStore("todo");      var request = store.delete(id);      request.onsuccess = function(e) {      html5rocks.indexedDB.getAllTodoItems();  // Refresh the screen    };      request.onerror = function(e) {      console.log(e);    };  };  html5rocks.indexedDB.deleteTodo = function(id) {

    if(!!result == false)

您必须先打开数据库,才能对其进行操作。 

通过对 createObjectStore单次调用创建对象存储。该方法会命名存储以及参数对象。参数对象非常重要,它可让您定义重要的可选属性。就我们而言,定义keyPath属性可让单个对象在存储中具备唯一性。本例中的该属性为“timeStamp”。objectStore中存储的每个对象都必须有“timeStamp”。

}

[html] 

  todos.innerHTML = "";

function init() {    html5rocks.indexedDB.open(); // open displays the data previously saved  }    window.addEventListener("DOMContentLoaded", init, false);  function init() {

    if(v!= db.version) {

  var store = trans.objectStore("todo");

setVersion 是代码中唯一能让我们改变数据库结构的地方。在setVersion中,我们可以创建和删除对象存储,以及构建和删除索引。调用setVersion可返回IDBRequest对象,供我们在其中附加回调。如果成功了,我们就开始创建对象存储。

  request.onsuccess = function(e) {

第 3步:向对象存储添加数据

  var db = html5rocks.indexedDB.db;

  var request = store.delete(id);

  request.onfailure = html5rocks.indexedDB.onerror;

html5rocks.indexedDB.addTodo = function(todoText) {    var db = html5rocks.indexedDB.db;    var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE, 0);    var store = trans.objectStore("todo");    var request = store.put({      "text": todoText,      "timeStamp" : new Date().getTime()    });      request.onsuccess = function(e) {      // Re-render all the todo's      html5rocks.indexedDB.getAllTodoItems();    };      request.onerror = function(e) {      console.log(e.value);    };  };  html5rocks.indexedDB.addTodo = function(todoText) {

创建了对象存储后,我们调用 getAllTodoItems方法。

 

 

各大主流浏览器(包括 Chrome浏览器、Safari、Opera等)和几乎所有基于Webkit的移动设备均支持WebSQL,并且很有可能在可预见的未来继续提供支持。

 

}上述代码其实有很多功能。我们在 API中定义了“open”方法,调用此方法即可打开“todos”数据库。打开请求不是立刻执行的,而是返回IDBRequest。如果当前函数存在,则会调用indexedDB.open方法。这与我们通常指定异步回调的方法略有不同,但是我们在回调执行前,有机会向IDBRequest对象附加我们自己的监听器。

取而代之的是 IndexedDB,本教程的主题是开发人员应使用这种数据存储在客户端上存储数据并进行操作。

      setVrequest.onfailure = html5rocks.indexedDB.onerror;

 

    html5rocks.indexedDB.db = e.target.result;

    console.log(e);

 

function renderTodo(row) {    var todos = document.getElementById("todoItems");    var li = document.createElement("li");    var a = document.createElement("a");    var t = document.createTextNode();    t.data = row.text;      a.addEventListener("click", function(e) {      html5rocks.indexedDB.deleteTodo(row.text);    });      a.textContent = " [Delete]";    li.appendChild(t);    li.appendChild(a);    todos.appendChild(li)  }  function renderTodo(row) {

 

  html5rocks.indexedDB.open(); // open displays the data previously saved

您只能在“SetVersion”事务内创建对象存储。我还没有介绍setVersion,这是一个非常重要的方法,这是代码中唯一能够供您创建对象存储和索引的地方。

      setVrequest.onsuccess = function(e) {

 

 

html5rocks.indexedDB = {};异步和事务性

 

  a.addEventListener("click", function(e) {

  request.onsuccess = function(e) {

第 1步:打开数据库

        var store = db.createObjectStore("todo",

 

    result.continue();

  li.appendChild(t);

  };

IndexedDB是什么?

};我们已打开称为“todos”的数据库,并已将其分配给html5rocks.indexedDB对象中的db变量。现在我们可以在整个教程中使用此变量来引用我们的数据库。

 

 

  cursorRequest.onsuccess = function(e) {

    var result = e.target.result;

  var todos = document.getElementById("todoItems");

 

第 4 步:呈现对象存储中的数据

第 2步:创建对象存储

window.addEventListener("DOMContentLoaded", init, false);这需要用到可将数据取出 DOM的函数,即 html5rocks.indexedDB.addTodo方法: 

为什么是 IndexedDB?

  };

本教程只是举了一个实际示例,告诉您针对编写为使用WebSQL 的现有应用如何使用IndexedDB。 

    "This is a description of the database.");

 

 

 

  var keyRange = IDBKeyRange.lowerBound(0);

html5rocks.indexedDB.open = function() {    var request = indexedDB.open("todos",      "This is a description of the database.");      request.onsuccess = function(e) {      var v = "1.0";      html5rocks.indexedDB.db = e.target.result;      var db = html5rocks.indexedDB.db;      // We can only create Object stores in a setVersion transaction;      if(v!= db.version) {        var setVrequest = db.setVersion(v);          // onsuccess is the only place we can create Object Stores        setVrequest.onfailure = html5rocks.indexedDB.onerror;        setVrequest.onsuccess = function(e) {          var store = db.createObjectStore("todo",            {keyPath: "timeStamp"});            html5rocks.indexedDB.getAllTodoItems();        };      }        html5rocks.indexedDB.getAllTodoItems();    };      request.onfailure = html5rocks.indexedDB.onerror;  }  html5rocks.indexedDB.open = function() {

第 6步:全部关联起来

现在我们有了事务、对要查询的存储的引用以及要迭代的范围。剩下的工作就是打开指针并附加“onsuccess”事件了。

[html] 

    "text": todoText,

如果打开请求成功了,我们的 onsuccess回调就会执行。在此回调中,我们应检查数据库版本,如果与预期版本不符,则调用“setVersion”。

  };

    console.log(e.value);

既然数据已经在数据库中了,我们就需要通过某种方法以有意义的方式访问数据。幸运的是,这样的方法非常简单直接:

 

          {keyPath: "timeStamp"});

 

我们要构建的是待办事项列表管理器,因此必须要能够向数据库中添加待办事项。方法如下:

 

 

  var li = document.createElement("li");

html5rocks.indexedDB.db = null;    html5rocks.indexedDB.open = function() {    var request = indexedDB.open("todos");      request.onsuccess = function(e) {      html5rocks.indexedDB.db = e.target.result;      // Do some more stuff in a minute    };      request.onfailure = html5rocks.indexedDB.onerror;  };  html5rocks.indexedDB.db = null;

 

      // onsuccess is the only place we can create Object Stores

本文由美洲杯冠军竞猜发布于计算机教程,转载请注明出处:HTML5 IndexedDB

关键词: