济南网站建设知名品牌，首屈一指的高端品牌济南网站建设中国旗舰级济南网站建设服务商，重视用户体验，创意，设计，开发。9.2实例21：在客户端关系数据库中保存数据 localStorage和sessionStorage为我们提供了在客户端计算机上保存简单名／值对数据的一种简便方法，但有时候这是远远不够的。起初，在关系数据库中存储数据的能力是在HTML5规范中引入的。后来这部分发展成了一份独立的规范，名为Web SQL Storagem。只要开发人员有编写SQL代码的基础，它使用起来就会非常顺手。为方便演示，这里将使用Web SQL Storage来创建、获取、更新和删除客户端数据库中的信息。9.2.1 浏览器中的CRUD 所谓CRUD，是“Create、Retrieve、Update和Delete”。的简称，即创建、获取、更新和删除，恰恰讲述了我们使用客户端数据库会做的事情。通过其规范和实现，我们可以对数据进行增删改查的操作。 AwesomeCo希望用一款可以在销售人员外出时收集留言的简单应用来武装自己的销售队伍。这个应用建好以后，不仅可以让用户创建新留言，还可以使之更新和删除已有的留言。要更改已有的留言，我们就需要让用户能先从数据库中将其取出来。 下面的SQL语句兢是我们要用到的。类 型 语 句创建留言获取所有留言获取特定留言更新留言删除留言INSERT INTO notes (title, note) VALUES("Test", "This is a note")SELECT id, title, note FROM notes;SELECT id, title, note FROM notes where id = 1;UPDATE notes set title = "bar", note = "Changed" where id =1;DELETE FROM notes where id = 1:坛小乔爱问…一< Web SQL Databases规范不是已经夭折了吗7 在2010年11月，维护这一规范的工作组宣称不再推进Web SQL Databases，将注意力转向了IndexedDB规范。我们之所以还在这里讨论Web SQL Databases，是因为基于Webkit的浏览器已经实现了此功能，包括所有iOS和Android设备、Safari以及Google Chrome。截至本书编写之时，还没有任何一种浏览器支持IndexedDB，但我们的项目中马上可以使用到WebSQL Databases，这或许是满足我们需求的正确之选。①参见http://dev.w3.org/htm15/webdatabase/.③也可以表示“Create、Read、Update和Destroy”，即创建、读取、更新和销毁。136◆第9章客户端数据的使用9.2.2留言的前端展现留言系统的前端左侧是一个侧边栏，其中是罗列出留言的列表，右侧包含一个标题域和用于编写留言的大文本框。效果见图9-2。* Firn nore* Sccond note^；a^面ere呲Noic首先，我们需要编写界面：Download htm15sql/index.html< ! doctype html>图9-2留言系统界面<html><head><title>AwesomeNotes</title> <link rel="stylesheet" href="style.css"><script type="text/javascr/pt"charset="utf-8"src= "http://a jax.goog7eapis.com/a jax/7 ibs/jquer y/1.4.2ljquery.min. js "></script><script type="text/javascr/pt" charset= "utf-8" src="javascripts/notes. js"></script></head><body> <section id="sidebar"> <input type="button" id="new_button" value="New note"> <ul id="notes"></ul></section><section id="main"><form><ol><li><input<input</li><li><label<input</li><li>9.2实例21:在客户端关系数据库中保存数据●137type="submit" id="save_button" value="Save">type="submit" id="delete_button" value="Delete">for="title">Title</label>type="text" id="title"> <label for="note">Note</label> <textarea id="note"></textarea> </li> </ol></form></section></body></htrril>我们使用section标签定义侧边栏和主体区域，并且为每个重要的用户界面控件指定了ID，例如Save（保存）按钮等。这样做可方便我们定位元素，以便为其附加事件监听器。我们还需要一个样式表，这样才能达到示例图中的显示效果。style．css如下所示：Download htm15sqUstyle.css#sidebar, #main{ display: block; float: left;#sidebar{ width: 25%;}#main{ width: 75%;}form ol{ list-style: none margin: 0; padding: 0;}138◆第9章客户端数据的使用form li{ padding: 0; margin: 0;form li label{display:block;}#title, #note{ width: 100%; font-size: 20px; border: 1px solid #OOO;}#title{ height: 20px;}#note{ height: 40px;这份样式表禁用了项目符号，定义了文本域的大小，将元素分成了两列。至此，前端代码就完成了。接下来要做的是搭配JavaScript代码来让其发挥作用。9.2.3连接数据库我们需要建立连接并创建一个数据库：Download html5sql门avascripts/notesjs／／数据库引用var db=null：／／创建到本地数据库的连接connectToDB=function(){ db=window.openDatabase( 'awesome_notes’, 'l.0’， ’AwesomeNotes Database’, 1024*1024*3);)：首先，我们在脚本顶部声明了db变量。这样在我们创建的其余所有方法中它都会有效。。然后我们使用州ndow.openDatabase万法声明了连接到数据库的方法。这里使用的参数有数据库名称、版本号、描述以及描述大小的参数。①这样做创建的是全局变量，但是通常不推荐使用。这里只是为了让JavaScript代码能够简洁易辨。
梦之网科技 http://www.mzwkj.com