HTML5 ? SQL ??????

? SQL ?????? API? HTML5 ??? ??? ???? SQL? ???? ????? ??????? ???? ?? API ??? ???? ???? ?????.

??? ??? ? ????? ?????, ??? SQL? RDBMS ??? ? ?? ?? ????. ??? SQL ??? ??? ?? SQL ????? ?????.

?? ??? Safari, Chrome, Opera?? ? SQL ??????? ??? ? ????.

?? ???

???? ??? ?? ??? 3?? ??? ????. ? ??????? ????:

openDatabase: ? ???? ?? ?????? ?? ? ??????? ???? ?????? ??? ?????.

????: ? ??? ???? ????? ???? ??? ??? ?? ?? ?? ??? ??? ? ????.

executeSql: ?? SQL ??? ???? ? ???? ??????.

?????? ??

??????? ?? ???? ?? openDatabase ???? ??????? ?? ??? ?????.

?? ??? ???? ??????? ???? ???:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

? ???? ?? 5?? ????? ?????:

?????? ??

?? ??

?? ???

?????? ??

?? ??

??? ? ?? ?? ????? ??? ??????? ??? ?? ?????. ??? ? ??? ??? ???? ???? ??????? ??? ??? ?????.

?? ??

??? ????? Database.transaction() ??? ???? ???. ? ??? ??? ?? ??? ???? ??? ??? ?? ??? ??? ?? ?????.

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024) ;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS(ID ??, ??)');
});

? ???? 'mydb' ??????? LOGS?? ???? ?????.

?? ??

???? ??? ???? ?? ? ?? ??? ?? ??? SQL ??? ?????.

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql(' ???? ?? ?? ??? ?? ??(id ??, ??)');
tx.executeSql('INSERT INTO LOGS(id, log) VALUES (1, "foobar")');
tx.executeSql(' INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});

??? ??? ? ?? ?? ??? ?? ???? ????? ??:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx .executeSql ('CREATE TABLE IF NOT EXISTS LOGS (id Unique, log)');
});

??? e_id ? e_log? ?????. ??? ???? ExecutionSql? ?? ????? ? ??? "?"? ?????. ?? ??

?? ???? ???? ???? ??? ???? ??? ?? ??? ??? ? ????.

var db = openDatabase('mydb', '1.0' , 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) {

tx.executeSql('CREATE TABLE IF ???? ?? ??(ID ??, ??)');

tx.executeSql('INSERT INTO LOGS(id, log) VALUES (1, "foobar")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")' );
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [] , function (tx, results) {
var len = results.rows.length, i;
msg = "<p>??? ?: " + len + "</p>";
document.querySelector('#status').innerHTML += msg ;
for (i = 0; i < len; i++){
Alert(results.rows.item(i).log );
}
}, null);
});

?? ?
????? ? ?? ??? ?? ??? HTML5 ??? ?? ?????. ???? Safari ?????? ??? ???.

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
  msg = '<p>Log message created and row inserted.</p>';
  document.querySelector('#status').innerHTML =  msg;
});
db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
   var len = results.rows.length, i;
   msg = "<p>Found rows: " + len + "</p>";
   document.querySelector('#status').innerHTML +=  msg;
   for (i = 0; i < len; i++){
     msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
     document.querySelector('#status').innerHTML +=  msg;
   }
 }, null);
});
</script>
</head>
<body>
<div id="status" name="status">Status Message</div>
</body>
</html>

?? ??? Safari ?? Opera ??????? ??? ?? ??? ?????.

?? ???? ???? ?? ???????.

?? ? : 2

foobar

logmsg

?? ??

?? ??? ???? ??? ??? ????.

db.transaction(function (tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
});

??? ??? ID ??? ??? ?? ????.

db.transaction (?? (tx) {
tx.executeSql('ID=?', [id]);
});

???? ??

???? ??? ???? ??? ??? ????.

db.transaction(function (tx) {
tx.executeSql('UPDATE LOGS SET log ='www.w3cschool .cc' WHERE id=2');
});

??? ??? ID ????? ??? ?? ????.

db.transaction( function(tx) {
tx.executeSql('UPDATE LOGS SET log='www.w3cschool.cc' WHERE id=?', [id]);
});

???? ??

??? ??

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> var db = openDatabase('mydb', '1.0', 'Test DB', 2*1024*1024); var msg; db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "php中文網(wǎng)")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "ipnx.cn")'); msg = '<p>數(shù)據(jù)表已創(chuàng)建，且插入了兩條數(shù)據(jù)。</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql('DELETE FROM LOGS WHERE id=3'); msg = '<p>刪除 id 為 3 的記錄。</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql('UPDATE LOGS SET log=\'ipnx.cn\' WHERE id=2'); msg = '<p>更新 id 為 2 的記錄。</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len = results.rows.length, i; msg = "<p>查詢記錄條數(shù): " + len + "</p>"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; document.querySelector('#status').innerHTML += msg; } }, null); }); </script> </head> <body> <div id="status" name="status">狀態(tài)信息</div> </body> </html>

?????? ???

????