Pangkalan data SQL Web HTML5

API Pangkalan Data Web SQL bukan sebahagian daripada spesifikasi HTML5, tetapi ia adalah spesifikasi bebas yang memperkenalkan satu set API untuk mengendalikan pangkalan data klien menggunakan SQL.

Anggap anda seorang pembangun web yang baik, jika ya, anda pasti akan mengetahui konsep SQL dan RDBMS. Jika anda masih memerlukan topik SQL, lihat tutorial SQL kami.

Kami boleh menggunakan pangkalan data Web SQL dalam versi terkini Safari, Chrome dan Opera.

Kaedah Teras

Berikut ialah tiga kaedah teras yang ditakrifkan dalam spesifikasi. Turut diliputi dalam tutorial ini:

openDatabase: Kaedah ini mencipta objek pangkalan data menggunakan pangkalan data sedia ada atau pangkalan data baharu.

transaksi: Kaedah ini membolehkan kami mengawal urus niaga dan melakukan komit atau rollback berdasarkan situasi ini.

executeSql: Kaedah ini digunakan untuk melaksanakan pertanyaan SQL sebenar.

Buka pangkalan data

Jika pangkalan data sudah wujud, kaedah openDatabase bertanggungjawab untuk membuka pangkalan data Jika ia tidak wujud, kaedah ini akan menciptanya.

Gunakan kod berikut untuk mencipta dan membuka pangkalan data:

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

Kaedah di atas menerima lima parameter berikut:

Nama pangkalan data

Nombor versi

Teks penerangan

Saiz pangkalan data

Buat panggilan balik

Parameter terakhir dan kelima, buat The panggilan balik akan dipanggil selepas pangkalan data dibuat. Walau bagaimanapun, walaupun tanpa ciri ini, masa jalan masih akan mencipta pangkalan data dan versi yang betul.

Laksanakan pertanyaan

Anda perlu menggunakan fungsi database.transaction() untuk melaksanakan pertanyaan. Fungsi ini mengambil satu parameter, iaitu fungsi yang bertanggungjawab untuk melaksanakan pertanyaan, seperti berikut:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024) ;
db.transaction(function (tx) {
tx.executeSql('CIPTA JADUAL JIKA TIDAK WUJUD LOG (id unik, log)');
});

Pernyataan pertanyaan di atas akan mencipta jadual yang dipanggil LOGS dalam pangkalan data 'mydb'.

Insert operation

Untuk mencipta entri dalam jadual, kami menambah pertanyaan SQL mudah kepada contoh di atas seperti berikut:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql(' BUAT JADUAL JIKA TIDAK WUJUD LOG (id unik, log)');
tx.executeSql('MASUKKAN KE DALAM LOG (id, log) NILAI (1, "foobar")');
tx.executeSql(' MASUKKAN KE DALAM LOG (id, log) NILAI (2, "logmsg")');
});

Apabila membuat entri, anda juga boleh menghantar nilai dinamik seperti yang ditunjukkan di bawah:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx .executeSql ('BUAT JADUAL JIKA TIDAK WUJUD LOG (id unik, log)' ];
});

e_id dan e_log di sini adalah luaran pembolehubah, executeSql akan memetakan setiap entri dalam parameter tatasusunan kepada "?" Operasi Baca

Untuk membaca rekod yang sedia ada, kita boleh menggunakan panggilan balik untuk menangkap keputusan seperti berikut:

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

db.transaction(function (tx) {

tx.executeSql('CREATE JADUAL JIKA NOT WUJUD LOG (id unik, log)');

tx.executeSql('MASUKKAN KE DALAM LOG (id, log) NILAI (1, "foobar")');

tx.executeSql('MASUKKAN KE DALAM LOG (id, log) NILAI (2, "logmsg")' );});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [] , fungsi (tx, hasil) {
var len = results.rows.length, i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector('#status').innerHTML += msg ;
untuk (i = 0; i < len; i++){
alert(results.rows.item(i).log );
}
}, batal);
});

Contoh Akhir
Akhir sekali, mari letakkan contoh ini ke dalam dokumen HTML5 yang lengkap seperti yang ditunjukkan di bawah dan cuba jalankannya dalam penyemak imbas 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>

Dalam versi terkini penyemak imbas Safari atau Opera ini akan menjana hasil berikut:

Mesej log dibuat dan baris dimasukkan.

Menjumpai baris : 2

foobar
logmsg

Padam rekod

Format yang digunakan untuk memadam rekod adalah seperti berikut:

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

Memadamkan id data yang ditentukan juga boleh menjadi dinamik:

db.transaction (fungsi (tx) {
tx.executeSql('DELETE FROM LOG WHERE id=?', [id]);
});

Kemas kini rekod

Format yang digunakan untuk rekod kemas kini adalah seperti berikut:

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

Mengemas kini id data yang ditentukan juga boleh menjadi dinamik:

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

Meneruskan pembelajaran

fail baharu

<!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中文网")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")'); msg = '<p>数据表已创建，且插入了两条数据。</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=\'www.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>查询记录条数: " + 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>

serahkan Tetapkan Semula Kod

Operasi automatik

Pangkalan data SQL Web HTML5

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]