HTML5 Indexed DB入门导学2

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

创新新互联，凭借10多年的成都做网站、网站设计、外贸营销网站建设经验，本着真心·诚心服务的企业理念服务于成都中小企业设计网站有1000多家案例。做网站建设，选创新互联。

更新记录

首先看下如何在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框架。

 
 
 
   
  
  
     
  
  
     
  
  
       
  
  
         
  
  
         
  
  
      
  
  
      Note Database   
  
  
      
  
  
         
  
  
         
  
  
      
  
  
       
  
  
      
  
  
       
  
  
      
  
  
         
  
  
           
  
  
             
  
  
            Note Database

/* 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;
}

$(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();
};

function displayNotes() {
var transaction = db.transaction(["note"], "readonly");
var content="TitleUpdated ";
transaction.oncomplete = function(event) {
$("#noteList").html(content);
};
var handleResult = function(event) {
var cursor = event.target.result;
if (cursor) {
content += ""+cursor.value.title+"";
content += ""+dtFormat(cursor.value.updated)+"";
content += "Edit Delete";
content +="";
cursor.continue();
}
else {
content += "";
}
};
var objectStore = transaction.objectStore("note");
objectStore.openCursor().onsuccess = handleResult;
}

$("#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("
"+note.title+"
"+note.body+"
").show();
$noteForm.hide();
};
});
$("#addNoteButton").on("click", function(e) {
$("#title").val("");
$("#body").val("");
$("#key").val("");
$noteDetail.hide();
$noteForm.show();
});

$("#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;
});
});

HTML5 Indexed DB入门导学2

Edit Note

"+note.title+"