HTML5 客户端数据库的支持。它允许开发者使用一个简单但却强有力的JavaScript数据库API来存储在关系的数据加密格式。
开发人员可以使用标准的SQL语句创建表,插入,更新,删除行,选择等等。JavaScript数据库API甚至支持交易。
JavaScript数据库API的三个核心方法：
1、openDatabase()： 使用现有数据库或创建新数据库创建数据库对象。5个参数：数据库名(mydb)，版本号(1.0)，描述(Test DB)，数据库大小(2*1024*1024)，创建回调函数
2、transaction()：根据情况控制事务提交或回滚。
3、executeSql()：执行真实的SQL查询。
链接数据库
View Code
1 var db;
2 var shortName="MyDB";
3 var verson="1.0";
4 var displayName="MyDB";
5 var maxSixe=65535;
6 db=openDatabase(shortName, version, displayName, maxSize)
检查表是否存在，若不存在创建该表
View Code
1 db.transaction(
2 function(transaction) {
3 transaction.executeSql(
4 'CREATE TABLE IF NOT EXISTS table' +
5 ' (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
6 ' date DATE NOT NULL, food TEXT NOT NULL, ' +
7 ' calories INTEGER NOT NULL);'
8 );
9 }
10 );
删除指定ID的数据
View Code
1 db.transaction(
2 function(transaction) {
3 transaction.executeSql('DELETE FROM entries WHERE id=?;',
4 [id], null, errorHandler);
5 }
6 );
添加数据
View Code
1 db.transaction(
2 function(transaction) {
3 transaction.executeSql('INSERT INTO entries (id,date, calories, food) VALUES (1, "7/31/2011", "ggg","ssss");',
4 callBackFun, errorHandler);
5 }
6 );
7
8 db.transaction(
9 function(transaction) {
10 transaction.executeSql(
11 'INSERT INTO entries (date, calories, food) VALUES (?, ?, ?);',
12 [date, calories, food],
13 callBackFun,
14 errorHandler
15 );
16 }
17 );
查询语句
View Code
1 db.transaction(
2 function(transaction) {
3 transaction.executeSql(
4 'SELECT * FROM entries WHERE date = ? ORDER BY food;',
5 [currentDate],
6 function(transaction, result) {
7 for (var i = 0; i < result.rows.length; i++) {
8 var row = result.rows.item(i);
9 var newEntryRow = $('#entryTemplate').clone();
10 newEntryRow.removeAttr('id');
11 newEntryRow.removeAttr('style');
12 newEntryRow.data('entryId', row.id);
13 newEntryRow.appendTo('#date ul');
14 newEntryRow.find('.label').text(row.food);
15 newEntryRow.find('.calories').text(row.calories);
16 newEntryRow.find('.delete').click(function() {
17 var clickedEntry = $(this).parent();
18 var clickedEntryId = clickedEntry.data('entryId');
19 deleteEntryById(clickedEntryId);
20 clickedEntry.slideUp();
21 });
22 }
23 },
24 errorHandler
25 );
26 }
27 );
========================
ps：有个疑问 我在火狐5下面是会报错的 不知道是本地原因还是浏览器问题
googol浏览器完全没问题
该例子参考资料【英文— —|||】:http://ofps.oreilly.com/titles/9780596805784/
完整：
引用插件： http://jqtouch.com/
js：
View Code
1 var jQT = $.jQTouch({
2 icon: 'kilo.png',
3 statusBar: 'black'
4 });
5 var db;
6 $(document).ready(function() {
7
8 // updateOrientation();
9 $('#createEntry form').submit(createEntry);
10 $('#settings form').submit(saveSettings);
11 $('#settings').bind('pageAnimationStart', loadSettings);
12 $('#dates li a').click(function() {
13 var dayOffset = this.id;
14 var date = new Date();
15 date.setDate(date.getDate() - dayOffset);
16 sessionStorage.currentDate = date.getMonth() + 1 + '/' +
17 date.getDate() + '/' +
18 date.getFullYear();
19 refreshEntries();
20 });
21 var shortName = 'Kilo';
22 var version = '1.0';
23 var displayName = 'Kilo';
24 var maxSize = 65536;
25 db = openDatabase(shortName, version, displayName, maxSize);
26 //添加表
27 db.transaction(
28 function(transaction) {
29 transaction.executeSql(
30 'CREATE TABLE IF NOT EXISTS entries ' +
31 ' (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
32 ' date DATE NOT NULL, food TEXT NOT NULL, ' +
33 ' calories INTEGER NOT NULL);'
34 );
35 }
36 );
37
38 //添加默认数据
39 db.transaction(
40 function(transaction) {
41 transaction.executeSql('INSERT INTO entries (id,date, calories, food) VALUES (1, "7/31/2011", "ggg","ssss");',
42 null, errorHandler);
43 }
44 )
45
46 //删除数据
47 // db.transaction(
48 // function(transaction) {
49 // transaction.executeSql('DELETE FROM entries WHERE id In (8,9,10,11,12,13,14,15,16,17,18,19,20,21,22);',
50 // null, errorHandler);
51 // }
52 // );
53 });
54 function loadSettings() {
55 $('#age').val(localStorage.age);
56 $('#budget').val(localStorage.budget);
57 $('#weight').val(localStorage.weight);
58 }
59 function saveSettings() {
60 localStorage.age = $('#age').val();
61 localStorage.budget = $('#budget').val();
62 localStorage.weight = $('#weight').val();
63 jQT.goBack();
64 return false;
65 }
66 function createEntry() {
67 var date = sessionStorage.currentDate;
68 var calories = $('#calories').val();
69 var food = $('#food').val();
70 db.transaction(
71 function(transaction) {
72 transaction.executeSql(
73 'INSERT INTO entries (date, calories, food) VALUES (?, ?, ?);',
74 [date, calories, food],
75 function() {
76 refreshEntries();
77 jQT.goBack();
78 },
79 errorHandler
80 );
81 }
82 );
83 return false;
84 }
85 function refreshEntries() {
86 var currentDate = sessionStorage.currentDate;
87 $('#date h1').text(currentDate);
88 $('#date ul li:gt(0)').remove();
89 db.transaction(
90 function(transaction) {
91 transaction.executeSql(
92 'SELECT * FROM entries WHERE date = ? ORDER BY food;',
93 [currentDate],
94 function(transaction, result) {
95 for (var i = 0; i < result.rows.length; i++) {
96 var row = result.rows.item(i);
97 var newEntryRow = $('#entryTemplate').clone();
98 newEntryRow.removeAttr('id');
99 newEntryRow.removeAttr('style');
100 newEntryRow.data('entryId', row.id);
101 newEntryRow.appendTo('#date ul');
102 newEntryRow.find('.label').text(row.food);
103 newEntryRow.find('.calories').text(row.calories);
104 newEntryRow.find('.delete').click(function() {
105 var clickedEntry = $(this).parent();
106 var clickedEntryId = clickedEntry.data('entryId');
107 deleteEntryById(clickedEntryId);
108 clickedEntry.slideUp();
109 });
110 }
111 },
112 errorHandler
113 );
114 }
115 );
116 }
117 function deleteEntryById(id) {
118 db.transaction(
119 function(transaction) {
120 transaction.executeSql('DELETE FROM entries WHERE id=?;',
121 [id], null, errorHandler);
122 }
123 );
124 }
125 function errorHandler(transaction, error) {
126 alert('Oops. Error was ' + error.message + ' (Code ' + error.code + ')');
127 return true;
128 }
html：
View Code
1 <html>
2 <head>
3 <title>Kilo</title>
4 <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
5 <link type="text/css" rel="stylesheet" media="screen" href="themes/apple/theme.css">
6 <link type="text/css" rel="stylesheet" media="screen" href="kilo.css">
7 <script type="text/javascript" src="jqtouch/jquery.js"></script>
8 <script type="text/javascript" src="jqtouch/jqtouch.js"></script>
9 <script type="text/javascript" src="kilo.js"></script>
10 <link rel="stylesheet" media="screen and (max- 320px)" href="portrait.css" />
11 <link rel="stylesheet" media="screen and (min- 321px)" href="landscape.css" />
12 </head>
13 <body >
14 <div id="home">
15 <div class="toolbar">
16 <h1>
17 Kilo</h1>
18 <a class="button flip" href="#settings">Settings</a>
19 </div>
20 <ul class="edgetoedge">
21 <li id="Li1" class="entry" style="display: none">1 <span class="label">Label</span>
22 <span class="calories">000</span> <span class="delete">Delete</span> </li>
23 </ul>
24 <ul class="edgetoedge">
25 <li class="arrow"><a href="#dates">Dates</a></li>
26 <li class="arrow"><a href="#about">About</a></li>
27 </ul>
28 </div>
29 <div id="about">
30 <div class="toolbar">
31 <h1>
32 About</h1>
33 <a class="button back" href="#">Back</a>
34 </div>
35 <div id="DivAbout">
36 <h4> Easy access to your food diary.PhoneGap is an open source development tool created by Nitobi (http://www.nitobi.com/)
37 to act as </h4>
38 <div><img src="img.jpg" /></div>
39 <p>
40 PhoneGap is an open source development tool created by Nitobi (http://www.nitobi.com/)
41 to act as a bridge between web applications and mobile devices. iPhone, Google Android,
42 and BlackBerry operating systems are currently supported, and Nokia and Windows
43 Mobile are in development. Add a comment</p>
44 <p>
45 In spite of its high profile, the iPhone is not even close to being the most widely
46 used mobile device. The mobile landscape is littered with devices, platforms, and
47 operating systems. If you are a web developer, you might be familiar with the pain
48 of testing 10 or so browser versions across 10 or so operating system versions.
49 Multiply that by 100, and you have mobile. There is simply no cost-effective way
50 to develop and test across all of the possible combinations. Add a comment</p>
51 <p>
52 Thanks to Apple, it’s now clear that there is a market for devices that offer a
53 full-featured web browsing experience. As more vendors include high-quality browsers
54 on their phones, the work that we’ve done here becomes more valuable. By building
55 a web app, we have effectively skirted much of the complexity of mobile development.
56 We can have one codebase deployed to multiple devices and platforms. Add a comment</p>
57 <p>
58 Of course, different devices have different features. Maybe a particular phone doesn’t
59 support multitouch, or doesn’t have an accelerometer. Even when devices do have
60 the same features, each has its own way of exposing these features to the developer.
61 Add a comment</p>
62 <p>
63 PhoneGap abstracts the APIs for the most widely available mobile phone features
64 so mobile application developers can use the same code everywhere. You still need
65 to deploy your app manually using the SDK provided by the vendor, but you don’t
66 need to change your application code.</p>
67 </div>
68 </div>
69 <div id="settings">
70 <div class="toolbar">
71 <h1>
72 Settings</h1>
73 <a class="button cancel" href="#">Cancel</a>
74 </div>
75 <form method="post">
76 <ul>
77 <li>
78 <input placeholder="Age" type="text" name="age" id="age" /></li>
79 <li>
80 <input placeholder="Weight" type="text" name="weight" id="weight" /></li>
81 <li>
82 <input placeholder="Budget" type="text" name="budget" id="budget" /></li>
83 <li>
84 <input type="submit" class="submit" name="action" value="Save Changes" /></li>
85 </ul>
86 </form>
87 </div>
88 <div id="dates">
89 <div class="toolbar">
90 <h1>
91 Dates</h1>
92 <a class="button back" href="#">Back</a>
93 </div>
94 <ul class="edgetoedge">
95 <li class="arrow"><a id="0" href="#date">Today</a></li>
96 <li class="arrow"><a id="1" href="#date">Yesterday</a></li>
97 <li class="arrow"><a id="2" href="#date">2 Days Ago</a></li>
98 <li class="arrow"><a id="3" href="#date">3 Days Ago</a></li>
99 <li class="arrow"><a id="4" href="#date">4 Days Ago</a></li>
100 <li class="arrow"><a id="5" href="#date">5 Days Ago</a></li>
101 </ul>
102 </div>
103 <div id="date">
104 <div class="toolbar">
105 <h1>
106 Date</h1>
107 <a class="button back" href="#">Back</a> <a class="button slideup" href="#createEntry">
108 +</a>
109 </div>
110 <ul class="edgetoedge">
111 <li id="entryTemplate" class="entry" style="display: none"><span class="label">Label</span>
112 <span class="calories">000</span> <span class="delete">Delete</span> </li>
113 </ul>
114 </div>
115 <div id="createEntry">
116 <div class="toolbar">
117 <h1>
118 New Entry</h1>
119 <a class="button cancel" href="#">Cancel</a>
120 </div>
121 <form method="post">
122 <ul>
123 <li>
124 <input type="text" placeholder="Food" name="food" id="food" autocapitalize="off"
125 autocorrect="off" autocomplete="off" /></li>
126 <li>
127 <input type="text" placeholder="Calories" name="calories" id="calories" autocapitalize="off"
128 autocorrect="off" autocomplete="off" /></li>
129 <li>
130 <input type="submit" class="submit" name="action" value="Save Entry" /></li>
131 </ul>
132 </form>
133 </div>
134 </body>
135 </html>