Pangkalan data SQL Web HTML5
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.
Jika anda seorang pengaturcara bahagian belakang web, operasi SQL sepatutnya mudah difahami.
Anda juga boleh merujuk kepada tutorial SQL kami untuk mengetahui lebih lanjut tentang operasi pangkalan data.
Pangkalan data SQL Web boleh berfungsi dalam versi terkini penyemak imbas Safari, Chrome dan Opera.
Kaedah teras
The berikut ialah tiga kaedah teras yang ditakrifkan dalam spesifikasi:
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, ini kaedah 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 panggil balik
Parameter terakhir dan kelima, panggil balik buat akan dipanggil selepas pangkalan data dibuat. Walau bagaimanapun, walaupun tanpa ciri ini, masa jalan masih akan mencipta pangkalan data dan versi yang betul.
Lakukan pertanyaan
Melaksanakan pertanyaan memerlukan penggunaan fungsi pangkalan data.transaksi(). Fungsi ini memerlukan satu parameter, iaitu fungsi yang bertanggungjawab untuk benar-benar melaksanakan pertanyaan, seperti yang ditunjukkan di bawah:
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)');
});Pernyataan pertanyaan di atas akan mencipta jadual yang dipanggil LOGS dalam pangkalan data 'mydb'.
Kendalian sisip
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('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")');
});Anda juga boleh menghantarnya apabila mencipta entri Nilai dinamik seperti yang ditunjukkan di bawah:
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];
});Di sini e_id dan e_log adalah pembolehubah luaran, executeSql akan memetakan setiap entri dalam parameter tatasusunan kepada "?".
Baca operasi
Untuk membaca rekod yang sedia ada, kita boleh menggunakan panggilan balik untuk menangkap keputusan, seperti ini:
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, "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>Found rows: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).log );
}
}, null);
});Contoh akhir
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>web SQL</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, "")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "m.sbmmt.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>Padam rekod
Format yang digunakan untuk memadam rekod adalah seperti berikut:
db.transaction(function (tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
});Padam id data yang ditentukan juga boleh menjadi dinamik:
db.transaction(function(tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
});
Kemas kini rekod
Format yang digunakan untuk mengemas kini rekod adalah seperti berikut:
db.transaction(function (tx) {
tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
});Kemas kini id data yang ditentukan juga boleh menjadi dinamik:
rreee
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
