济南网站建设知名品牌，首屈一指的高端品牌济南网站建设中国旗舰级济南网站建设服务商，重视用户体验，创意，设计，开发。142◆第9章客户端数据的使用Download htm15sql]javascripts/notesjsinsertNote = function(title, note){db.transaction(function(tx){      tx.executeSql("INSERT INTO notes (tit7e, note) VALUES (?, ?)"                                [title.val(),  note.val()] ,      function(tx, result){        var id = result.insertld ;            alert('Record  r + id+  ' saved! ');       title.attr("data_/d", result.insertld );                    addToNotesList(id,   title.val (》 ;              $("#de7ete_button").show() ;)；))；)},function() {  alert(rThe note cou7d not be saved. ')}  insertNote0方法将记录插入到数据库中，使用结果集的insertid属性获取刚插入记录的ID。然后将其作为一种自定义数据属性应用到表单的title域，触发addToNotesList()穷法将留言添加到页面左侧的列表中。接下来，我们需要处理更新事件。updateNote0方法同其他方法类似：Download htm15sql/javascripts/notes.jsupdateNote = function(title, note){    var id = title.attr("data-/d") ;db.transaction(function(tx){   tx.executeSql("UPDATE notes set tit7e = ?, note = ? where id = ?               [title.val(), note.val(), id],     function(tx, result){      alert('Record r + id + , updated!');              $( "#notes>71[data-/d="  +  id  +  "J ").html(title.val(》 ;      },               function () {      alert('The note was not updated!');         }    ); });};update语句成功执行后，我们通过data-id域中的刚更新过的ID值更新列表中的留言标题。删除记录几乎同更新是一样的。我们需要如下所示的删除事件处理程序：Download htm15sql/javascripts/notes.js9.2实例21：在客户端关系数据库中保存数据●143$( "#de7ete_button") .click(function(event) {   event.preventDefault() ; var title = $("#t/t7e");   deleteNote(title) ;});    接着，编写删除方法。此方法不仅要从数据库中删除记录，而且还要在前端的侧边栏列表中也一并删除它：Download htm15sql/javascripts/notes.jsdeleteNote = function(title){    var id = title.attr("data-/d") ;      db.transaction(function(tx) {     tx.executeSql("DELETE from notes where id = 7", [id]       function(tx, result){ alert('Record r + id +  $( "#notes>7iEdata-/d="},function() { ' de7eted! ') ;al ert( 'The  note  was  not de7eted! ') ;    )    )；    ))；    )；    现在剩下的工作只是清空表单了。这样做是为了避免在创建新的记录时意外地影响到现有的记录。9.2.8包装    我们的留言系统基本完成了，接下来只需要激活New按钮即可。按下该按钮会清空表单，这样用户便可以在编辑完一条留言后，创建新的留言。与先前的模式一样，先从iQuery函数中New按钮的事件处理程序开始：Download htm15sql/javascripts/notes.js$( "#new_button") .click(function(event) {   event.preventDefault() ;   newNote() ;});//end:newbutton    newNote ()});144◆第9章客户端数据的使用    接着，清空“title”域的data-id属性，从表单中移除对应值。在此，我们还会隐藏页面上的Delete按钮：    Download htm15sql/javoscripts/notesjs    newNote=function(){    $("#de7ete_button").hide0;    var title=$（"孝t彳t7e"）；    title.removeAttr( "data-/d¨);    tjtle.val("");    var note=$("#note¨)；    note.val(¨¨)；    )    我们应该在iQuery函数内部调用newForm方法，这样当页面加载的时候表单就可用了。这样的话，Delete按钮也就隐藏了。    所有的操作都完成了。我们的应用在iPhone、Android设备和安装有Chrome、Safari和Opera的计算机中运行。不过在Firefox中有一定几率可成功，而在Internet Explorer中却得不到支持。9.2.9回退    同其他的解决方案不同，对于SQL存储来说，还没有比较好的库可用。因此无法为InternetExlporer用户提供原生支持。但是，如果你认为这种座用是有用的，那么可以说服用户使用GoogleChrome来访问这个特殊的应用，因为Google Chrome在各种平台上都能使用。实际项目中这种方式并不少见，特别是对于需要同时在手机上访问的内部系统来说，要求更换浏览器是很正常的。    另一种可选方案是使用Google Chrome Frame插件。。在HTML页面中的head标签下添加：Download htm15sql/index.html<meta http-equiv="X-UA-Compatible" content="chrome=l">这个代码片段会被Google Chrome Frame插件读取，并为页面启用此功能。    如果要检测插件的存在性，然后在它不存在的情况下提醒用户安装，那么可以将下面的代码插入到body结束标签的上方：Download htm15sql/index.himl<script type="text/javascript"src=   "http://a jax.goog7eapis.com/a jax/7 ibs/chrome- frame/l/CFInsta7 7 .min. js "></sc ript>①参见 http://code.google.com/chrome/chromeframe/。