Najlepszy samouczek HTML5 Web SQL Database W 2024 r. W tym samouczku możesz dowiedzieć się Podstawowe metody,Otwieranie bazy danych,Aby wykonać operacje zapytań,Należy wprowadzić dane,odczytać dane,Kompletny przykład,Usuń rekord,Aktualizuj Records,Kompletny przykład,
Web SQL Database API nie jest częścią specyfikacji HTML5, ale to osobna specyfikacja, wprowadziła zestaw funkcji API do korzystania z bazy danych klienta operacji SQL.
Jeśli jesteś programistą WWW tył, to powinno być łatwe do zrozumienia operacji SQL.
Można także zapoznać się z naszym poradniku SQL , aby dowiedzieć się więcej operacji bazy wiedzy.
Web SQL Database może pracować w najnowszej wersji Safari, Chrome i przeglądarki Opera.
Poniżej znajdują się trzy podstawowe metody zdefiniowane w specyfikacji:
metodę OpenDatabase () możemy użyć, aby otworzyć istniejącą bazę danych, jeśli baza danych nie istnieje, należy utworzyć nową bazę danych, należy użyć następującego kodu:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
openDatabase () w pięciu parametrów odpowiadających opisie:
Piąty parametr stworzyć callback zostanie wywołana po utworzeniu bazy danych.
Wykonanie wykorzystuje database.transaction funkcji ():
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)'); });
Powyższa instrukcja tworzy tabelę o nazwie loguje się do bazy "mydb" po egzekucji.
Po wykonaniu powyższego oświadczenia do tworzenia tabeli, możemy wstawić niektóre dane:
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, "本教程")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3write.com")'); });
Możemy również użyć wartości dynamicznej wstawić dane:
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 (?, ?'), [e_id, e_log]; });
Instancja e_id e_log zmienne zewnętrzne, tablica ExecuteSQL parametr jest mapowany do każdego wpisu w "?".
Poniższy przykład pokazuje, jak odczytywać dane już w bazie danych:
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, "本教程")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3write.com")'); }); 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); });
<!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, "本教程")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3write.com")'); msg = '<p>数据表已创建,且插入了两条数据。</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>查询记录条数: " + 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">状态信息</div> </body> </html>
Przykłady powyższych wyników operacyjnych, jak pokazano poniżej:
Format usuwać rekordy są w następujący sposób:
db.transaction(function (tx) { tx.executeSql('DELETE FROM LOGS WHERE id=1'); });
Usuń określony id Dane te mogą być także dynamiczna:
db.transaction(function(tx) { tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]); });
Zapisy Aktualizuj używając następującego formatu:
db.transaction(function (tx) { tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2'); });
Aktualizuje określonego identyfikatora Dane te mogą być także dynamiczna:
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, "本教程")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3write.com")'); msg = '<p>数据表已创建,且插入了两条数据。</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=\'www.w3cschool.cc\' 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>查询记录条数: " + 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">状态信息</div> </body> </html>
Przykłady powyższych wyników operacyjnych, jak pokazano poniżej: