HTML5 ? SQL

HTML5 ? SQL ??????

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

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

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

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

?? ???

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

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

?????? ??

??????? ?? ?? ?? openDatabase() ???? ???? ?? ??????? ? ? ????. ???? ??? ?? ??? ???? ? ??????? ?????:

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

openDatabase() ???? ???? 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?? ???? ?????. .

??? ??

?? create table ?? ??? ? ?? ???? ??? ? ????.

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)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "php中文網(wǎng)")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "ipnx.cn")');
});

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

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id ??, ??)');
tx.executeSql('INSERT INTO LOGS
(id, log) ) VALUES (?, ?'), [e_id, e_log];
});

????? e_id ? e_log? ?? ????, ExecuteSql? ?? ?? ????? ? ??? "?"? ?????.

??? ??

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

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, "php中文網(wǎng)")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "ipnx.cn")');
});

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++){
??(results.rows.item(i).log );
}

}, null);
});

?? ?

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
    <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('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>

???? ?? ??:

?? ??

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

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

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

db.transaction(function(tx) {
tx.executeSql('DELETE FROM LOGS WHERE 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]);
});

?? ????

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

db.transaction(function (tx) {
tx. ExecutionSql( '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">
    <title>php中文網(wǎng)(php.cn)</title> 
    <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=1');
            msg = '<p>刪除 id 為 1 的記錄。</p>';
            document.querySelector('#status').innerHTML =  msg;
        });
        db.transaction(function (tx) {
            tx.executeSql('UPDATE LOGS SET log=\'php.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>

???? ?? ?? :

???? ??

??? ??

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> <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('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>

?????? ???

????