在所有HTML 5的特性中，Web SQL Database的功能非常强大。Web SQL Database提供给开发者一个简单而强大的JavaScript数据库API，使得可以在一个本地SQLite数据库中持久保存数据。其实Web SQL Database并非是HTML 5的一部分，它其实是摆脱了HTML 5的细则，并将其融入到自己的细则当中。
开发者可以使用标准SQL语句来创建数据表及插入、更新、查找和删除行。JavaScript Database API甚至能够支持Transaction（事务）。SQL有与生俱来的复杂性，但无论如何，这是一个改变游戏规则的变化，所以关注它本身可能会更有意义。在接下来的内容中，将详细讲解使用Web SQL Database操作数据库的基本知识。
1.创建数据库
现在用户已经选择好Date面板所需的数据了，在编写createEntry（）函数之前，还要建立一个数据库来存储提交的数据（这是个一次性的操作）。可以在文件123.js中添加如下代码来实现这项功能。
（1）首先要注意的是，在程序里有一个名为db的全局变量。一旦建立一个数据库连接，这个变量就会保存连接的引用。它之所以被设置成全局变量，是因为在程序的各个地方都将会用到它。
（2）接下来的4行代码定义了调用openDatabase（）需要的参数，具体说明如下。
□shortName：一个指向硬盘上的数据库文件的字符串。
□version：当需要修改数据库模式时，用来管理升级和向后兼容的数字。例如，每次程序启动时检查version字段，如果过期则创建一个新的数据库，并且将老数据库中的数据移到新数据库中。
□displayName：表示用户显示的字符串。
□maxSize：允许数据库增长到的最大KB数。
（3）当参数被设置以后，这行代码将会调用openDatabase（）并且将数据库连接存储到db变量中。如果数据库不存在，则会新建一个。
（4）所有的数据库查询都必须放在一个事务的上下文当中，所以这里调用了一个db对象的transaction方法。而接下来的几行会构造一个函数作为唯一的参数传入transaction方法。
（5）从本行开始是一个匿名函数，将transaction对象当作参数传入。
（6）一旦进入这个函数，调用transaction对象的executeSql（）方法来执行一个标准的CREATE TABLE查询语句。其中的IF NOT EXISTS子句，能够防止已经存在数据表的情况下再次创建数据表的情形。
如果再次启动程序，会在Android手机上创建一个名为“123”的数据库。在Chrome的桌面版中，实际上是可以浏览并操作客户端的数据库的，只需要导航到View→Developer→Developer Tools，而后点击Storage选项。在Chrome桌面版中，Developer Tools对于调试来说是相当有用的。在默认情况下，这个工具栏会作为浏览器的一个面板出现。如果点击浮动图标，这个面板会作为一个独立的窗口显示。通过点击数据库名，这个界面甚至允许执行任意的SQL查询语句。
2.插入行
现在已经有一个配置好的数据库来接收数据条目，可以生成一个createEntry（）函数了。首先，重写#createEntry表单的提交事件，通过将createEntry（）函数和文件123.js中document ready函数中的提交事件绑定到一起来达成此目的。下面只显示了前几行，详情参见粗体代码。
这样，每当用户提交#createEntry表单时就会调用createEntry（）函数。接下来，在文件123.js中添加如下的代码，以在数据库中创建记录。
（1）这部分包含了将会在SQL查询语句中使用的一些变量。前面用户在Dates面板上点击的日期数据已经保存在sessionStorage.currentDate中，使用之前在Settings表单中用到的相同方法，可以从表单中获得另外两个值（calories和food）。
（2）这段代码打开一个数据库事务，并且执行executeSql（）调用。这时会传入方法executeSql（）中如下的4个参数。
□“INSERT INTO entries（date，calories，food）VALUES（？，？，？）”：是即将被执行的语句，问号代表数据占位符。
□“[date，calories，food]”：这个数值数组将被传入数据库当中，和SQL语句中的问号占位符一一对应。
□“function（）{refreshEnt ries（）；iQT.goBack（）；}”：如果SQL查询语句成功返回，这个匿名函数将会被调用。
□errorHandler：如果执行SQL语句失败，将会执行错误处理函数。
假设插入数据正确，将会执行作为第3个参数的匿名函数。这个函数会调用refreshEnt ries（）函数。现在这个函数只能更新Date面板的标题，但是之后就会看到创建的条目在列表当中显示。
如果插入不成功则会执行errorHandler（）函数。在文件123.js中添加如下代码。
上述错误处理函数会传入两个参数：transaction对象和error对象。这里使用error对象来提示用户错误信息和抛出的错误码。错误处理函数必须返回true或false。如果一个错误处理函数返回true，比如这是一个致命的错误，执行过程会被停止并且整个事务将会回滚，如果错误处理函数返回false，比如这不是一个致命的错误，则执行过程会继续进行。
在有些情况下，可能需要根据不同的错误类型来判断返回值为true或false。其实除了error对象以外，函数errorHandler（）接收了一个transaction对象。如果没有建立语句当中提到的errors表的话，下面的代码将不会被执行。
如果希望执行executeSql（）函数中的语句，那么错误处理函数就必须返回false。如果返回的是true（或者没有返回值），则在包括错误处理在内的整个事务当中的SQL语句都将会回滚，这样就达不到希望的效果了。(www.xing528.com)
3.检索行及处理结果集
接下来需要扩展refreshEntries（）函数以完成更多功能，而不只是将选择的日期数据更新到标签栏上。具体来讲，下面将会查询数据库中被选择的日期条目，并使用HTML中隐藏的entryTemplate把它们添加到#date ul元素中。在这里把Date面板中的代码再次展示出来，它们已经在文件index.html中了，所以无需添加。
注意上面的加粗斜体代码：li元素的样式属性已经设置成“display：none”，这会使该元素不在页面上显示出来。这样做是因为使用了HTML代码段作为数据库行显示的模板。
下面是完整的refreshEntries（）函数，需要将文件123.js中现有的函数refreshEntries（）的代码替换成如下的代码。
（1）使用sessionStorage中保存的currentDate值来设置Date面板中的标题栏。
（2）使用jQTouch的gt（）函数（gt代表“greater than”）来查找并移除任何索引大于0的li元素。
（3）这3行用于设置数据库事务和executeSql语句。
（4）本行包含了executeSql函数的第一个参数，这是一个简单的SELECT语句，问号代表一个数据占位符。
（5）这是只有一个元素的数组，包含了现有被检索到的数据。在SQL查询语句中，问号将会被该元素代替。
（6）当完成正确的查询工作时会调用这个匿名函数，会接收到两个参数：transaction和result。
（7）本行使用rows的item（）方法把查询到的行的内容设置到row变量中。
（8）在这行代码中，使用clone（）方法来复制模板li，并且在下两行中删除掉它的id和style属性。删除掉style属性会使这行可见，而删除掉id是很重要的，否则在页面的结尾中就会出现有多个相同id的数据项。
（9）本行中将row的id属性作为数据存入li元素中，需要这个数据是因为在删除的时候知道这是哪条记录。
（10）这行代码将li元素加入其父元素uL当中。接下来的两行用row中相应的数据更新li的子元素label和calories。
经过上述操作处理后，Date面板会操作从数据库中检索出来的数据，设置每一行显示一个li元素，每一行都有一个lable、calories和Delete按钮。如果再创建一些行，就需要加上一些CSS，让界面变得更美观。所以将下面的CSS代码保存到文件123.css中，并且需要将这个文件放在和HTML同一层目录下。
然后在文件index.html的head部分添加如下代码以便连接到文件123.css。
<link type="text/css"rel="stylesheet"media="sc reen"href="123.css">
尽管现在Delete按钮看起来更像一个按钮了，但是点击这些按钮时却没有任何反应。这是因为它是使用<span>标签来实现的按钮，这在HTML页面中是一个无法交互的元素。
4.删除行
为了让Delete按钮起作用，需要使用jQuery将它们和点击事件绑定起来。与Dates面板中的条目不同，Date面板中的条目不是静态的，这说明它们的添加和删除跟用户的session相关。其实当启动程序时，Date面板上并没有可见的条目，因此也没有什么可以绑定到click事件上。
解决方案是当Delete按钮在refreshEntries（）函数被创建时，将它们绑定到click事件上。为了做到这点，需要在for循环的最后添加如下加粗的代码：
（1）这个函数只在date元素的ID中寻找任何有delete这个类的元素，并设置它们的click（）函数。这个click（）函数允许用一个匿名函数作为参数来处理点击事件。
（2）当click事件被触发以后，Delete按钮的父元素（这里是li）被找到，然后被保存到clickedEntry变量中。
（3）这行代码使用函数refreshEntries（）创建的li元素保存的entryId值来设置clickedEntryId变量。
（4）这行代码将被点击元素的ID传入deleteEntryById（）函数中，接下来的一行代码会调用jQuery的slideUp（）函数将li元素从界面上移除。
在文件123.js中添加deleteEnt ryById（）函数，功能是从数据库中移除一条记录。
然后打开一个事务，并将一个参数为transaction对象的回调函数作为参数传入transaction中，然后执行executeSql（）方法。方法中的SQL查询语句和被点击记录的ID作为两个参数传入。第3个参数是成功处理函数，因为不需要，所以被指定为null。再看第4个参数，将其指定为一直使用的错误处理函数。虽然用了很多描述才完成这项功能，但实际上代码并不多。
在演示文件123.中，与数据库交互操作相关的全部JavaScript代码如下。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
