HTML5 Indexed DB入门导学2-51CTO.COM

在本系列教程的第一篇http://developer.51cto.com/art/201310/412224.htm 中,我们向大家介绍了IndexedDB的基本知识,在本篇教程中,将继续向大家介绍如何使用IndexedDB进行CRUD(增删改查)的功能,其中将特别将讲解IndexedDB的更新和删除功能,并且将会演示一个实际的例子,这个例子在第三篇教程中将会用到。

更新记录

首先看下如何在IndexedDB中更新记录。如果记得上一篇教程的话，增加数据是很简单的，如下：

　//定义person 
var person = { 
    name:name, 
    email:email, 
    created:new Date() 
} 
  
// 定义增加操作 
var request = store.add(person);

对于更新操作，如果已经在对象中已经定义了id作为key，则只需要使用put方法代替add方法即可，代码如下：

var person = { 
    name:name, 
    email:email, 
    created:new Date(), 
    id:someId 
} 
  
var request = store.put(person);

和增加的方法一样，可以指定各类回调方法对结果进行异步处理。

删除记录

删除记录的方法是通过delete这个API去实现，下面是例子：

var t = db.transaction(["people"], "readwrite"); 
var request = t.objectStore("people").delete(thisId);

同样，可以指定各类回调方法对结果进行异步处理。

在学会了如何使用IndexedDB进行CRUD后，下面我们以一个实际的例子来设计一个简单的记事本应用。　

记事本应用

下面我们来学习如何使用学到的IndexedDB知识，设计一个简单的记事本应用。在应用启动的时候，先初始化IndexedDB数据库，并且展示一个空的表格，能让用户增加空的记录。界面如下图：

当先“Add Note”按钮后，出现的界面如下图：

可以在这里输入要记录的事情，然后点Save键保存。保存后的列表界面如下图：

#p#

同时用户可以再次编辑或删除记事的内容。下面我们首先开始设计第一个页面，注意我们使用的是bootstrap框架。

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  
    <title>Note Database</title> 
  
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> 
    <link href="css/app.css" rel="stylesheet"> 
  
  </head> 
  
  <body> 
  
    <div class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container"> 
        <div class="navbar-header"> 
          <a class="navbar-brand" href="#">Note Database</a> 
        </div> 
      </div> 
    </div> 
  
    <div class="container"> 
  
        <div id="noteList"></div> 
        <div class="pull-right"><button id="addNoteButton" class="btn btn-success">Add Note</button></div> 
        <div id="noteDetail"></div> 
  
        <div id="noteForm"> 
            <h2>Edit Note</h2> 
            <form role="form" class="form-horizontal"> 
            <input type="hidden" id="key"> 
            <div class="form-group"> 
                <label for="title" class="col-lg-2 control-label">Title</label> 
                <div class="col-lg-10"> 
                <input type="text" id="title" required class="form-control"> 
                </div> 
            </div> 
            <div class="form-group"> 
                <label for="body" class="col-lg-2 control-label">Body</label>    
                <div class="col-lg-10"> 
                <textarea id="body" required class="form-control"></textarea> 
                </div> 
            </div> 
            <div class="form-group"> 
                <div class="col-lg-offset-2 col-lg-10"> 
                    <button id="saveNoteButton" class="btn btn-default">Save Note</button> 
                </div> 
            </div> 
            </form> 
        </div> 
  
    </div> 
  
    <script src="js/jquery-2.0.0.min.js"></script> 
    <script src="bootstrap/js/bootstrap.min.js"></script> 
    <script src="js/app.js"></script> 
  </body> 
</html>

接下来是编写核心的js文件，首先是一个处理日期的工具类，比较简单：

/* global console,$,document,window,alert */ 
var db; 
  
function dtFormat(input) { 
    if(!input) return ""; 
    var res = (input.getMonth()+1) + "/" + input.getDate() + "/" + input.getFullYear() + " "; 
    var hour = input.getHours(); 
    var ampm = "AM"; 
    if(hour === 12) ampm = "PM"; 
    if(hour > 12){ 
        hour-=12; 
        ampm = "PM"; 
    } 
    var minute = input.getMinutes()+1; 
    if(minute < 10) minute = "0" + minute; 
    res += hour + ":" + minute + " " + ampm; 
    return res; 
}

接下来的代码中，要首先检查浏览器是否支持IndexedDB，如果支持IndexedDB，则打开数据库，代码如下：

$(document).ready(function() { 
  
    if(!("indexedDB" in window)) { 
        alert("IndexedDB support required for this demo!"); 
        return; 
    } 
  
    var $noteDetail = $("#noteDetail"); 
    var $noteForm = $("#noteForm"); 
  
    var openRequest = window.indexedDB.open("nettuts_notes_1",1); 
  
    openRequest.onerror = function(e) { 
        console.log("Error opening db"); 
        console.dir(e); 
    }; 
  
    openRequest.onupgradeneeded = function(e) { 
  
        var thisDb = e.target.result; 
        var objectStore; 
  
        //创建记录 
        if(!thisDb.objectStoreNames.contains("note")) { 
            console.log("I need to make the note objectstore"); 
            objectStore = thisDb.createObjectStore("note", { keyPath: "id", autoIncrement:true });   
        } 
  
    }; 
  
    openRequest.onsuccess = function(e) { 
        db = e.target.result; 
  
        db.onerror = function(event) { 
         //处理所有的数据异常 
          alert("Database error: " + event.target.errorCode); 
          console.dir(event.target); 
        }; 
  
        displayNotes(); 
  
    };

#p#

在上面的代码中，首先判断用户的浏览器是否支持IndexedDB，如果支持的话，则打开数据库，在其中的onupgradeneeded事件中建立名为note的objectstore，并且注意这里要编写对应的操作成功和失败的回调处理事件。一切准备就绪后，则可以调用displayNotes()方法显示所有的记事列表，其代码如下：

function displayNotes() { 
  
    var transaction = db.transaction(["note"], "readonly");   
    var content="<table class='table table-bordered table-striped'><thead><tr><th>Title</th><th>Updated</th><th>&amp;nbsp;</td></thead><tbody>"; 
  
    transaction.oncomplete = function(event) { 
        $("#noteList").html(content); 
    }; 
  
    var handleResult = function(event) {   
      var cursor = event.target.result;   
      if (cursor) {   
        content += "<tr data-key=\""+cursor.key+"\"><td class=\"notetitle\">"+cursor.value.title+"</td>"; 
        content += "<td>"+dtFormat(cursor.value.updated)+"</td>"; 
  
        content += "<td><a class=\"btn btn-primary edit\">Edit</a> <a class=\"btn btn-danger delete\">Delete</a></td>"; 
        content +="</tr>"; 
        cursor.continue();   
      }   
      else {   
        content += "</tbody></table>"; 
      }   
    }; 
  
    var objectStore = transaction.objectStore("note"); 
  
    objectStore.openCursor().onsuccess = handleResult; 
  
}

在本系列教程的第一篇中，已经讨论过如何循环读取IndexedDB中的数据（使用的是游标　cursor，还记得么？），但在上面的这段代码中，我们在objectStore.openCursor()事件的onsuccess方法中，指定了其回调处理代码为handleResult，而在handleResult方法中，完成了对数据库中数据的循环读取列表。而在IndexedDB中允许直接在最顶层的事务中绑定onComplete事件，这就给我们带来了方便，比如例子中可以将比如大量的文本输出（这里的content）交给前端jQuery进行显示处理。

接下来看删除，编辑和增加记事的功能代码：

$("#noteList").on("click", "a.delete", function(e) { 
    var thisId = $(this).parent().parent().data("key"); 
  
    var t = db.transaction(["note"], "readwrite"); 
    var request = t.objectStore("note").delete(thisId); 
    t.oncomplete = function(event) { 
        displayNotes(); 
        $noteDetail.hide(); 
        $noteForm.hide(); 
    }; 
    return false; 
}); 
  
$("#noteList").on("click", "a.edit", function(e) { 
    var thisId = $(this).parent().parent().data("key"); 
  
    var request = db.transaction(["note"], "readwrite")   
                    .objectStore("note")   
                    .get(thisId);   
    request.onsuccess = function(event) {   
        var note = request.result; 
        $("#key").val(note.id); 
        $("#title").val(note.title); 
        $("#body").val(note.body); 
        $noteDetail.hide(); 
        $noteForm.show(); 
    }; 
  
    return false; 
}); 
  
$("#noteList").on("click", "td", function() { 
    var thisId = $(this).parent().data("key"); 
    var transaction = db.transaction(["note"]);   
    var objectStore = transaction.objectStore("note");   
    var request = objectStore.get(thisId); 
  
    request.onsuccess = function(event) {   
        var note = request.result; 
        $noteDetail.html("<h2>"+note.title+"</h2><p>"+note.body+"</p>").show(); 
        $noteForm.hide(); 
    };   
}); 
  
$("#addNoteButton").on("click", function(e) { 
    $("#title").val(""); 
    $("#body").val(""); 
    $("#key").val(""); 
    $noteDetail.hide(); 
    $noteForm.show();        
});

只要用户读过本系列教程的第一篇，就应该知道上面的代码并不复杂，关键点是无论是编辑还是删除记事，都是必须先找出其id,这其实通过普通的DOM操作就可以实现了。接下来看保存记事的代码：

$("#saveNoteButton").on("click",function() { 
  
        var title = $("#title").val(); 
        var body = $("#body").val(); 
        var key = $("#key").val(); 
  
        var t = db.transaction(["note"], "readwrite"); 
  
        if(key === "") { 
            t.objectStore("note") 
                            .add({title:title,body:body,updated:new Date()}); 
        } else { 
            t.objectStore("note") 
                            .put({title:title,body:body,updated:new Date(),id:Number(key)}); 
        } 
  
        t.oncomplete = function(event) { 
            $("#key").val(""); 
            $("#title").val(""); 
            $("#body").val(""); 
            displayNotes(); 
            $noteForm.hide();            
        }; 
  
        return false; 
    }); 
  
});

在上面的代码中，通过IF语句去判断KEY是否为空，如果是空的话则表示是新增加记录，否则就是在更新记录。

在本系列教程的下一讲，将重点介绍IndexedDB 的检索功能和数组方面的功能。本讲的代码可以在如下连接下载：https://github.com/tutsplus/working-with-indexeddb-part-two

原文链接：http://net.tutsplus.com/tutorials/javascript-ajax/working-with-indexeddb-part-2/