HTML5 Web SQL
Pangkalan Data SQL Web HTML5
API Pangkalan Data SQL Web bukan sebahagian daripada spesifikasi HTML5, tetapi ia adalah spesifikasi bebas yang memperkenalkan set API yang menggunakan API SQL untuk mengendalikan pangkalan data pelanggan.
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 berfungsi dalam versi terkini penyemak imbas Safari, Chrome dan Opera.
Kaedah Teras
Berikut ialah tiga kaedah teras yang ditakrifkan dalam spesifikasi:
openDatabase: Ini kaedah Cipta 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
Kita boleh menggunakan kaedah openDatabase() untuk membuka pangkalan data sedia ada, jika pangkalan data melakukannya tidak wujud , pangkalan data baharu akan dibuat dengan kod berikut:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024) ;
Penjelasan lima parameter yang sepadan dengan kaedah openDatabase():
Nama pangkalan data
Nombor versi
Teks penerangan
Saiz pangkalan data
Buat panggilan balik
Parameter kelima, panggilan balik penciptaan akan dipanggil selepas pangkalan data dibuat.
Lakukan operasi pertanyaan
Lakukan operasi menggunakan fungsi database.transaction():
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CIPTA JADUAL JIKA TIDAK WUJUD LOG (id unique, log)');
});
Selepas pernyataan di atas dilaksanakan, jadual bernama LOGS akan dibuat dalam pangkalan data 'mydb' .
Sisipkan data
Selepas melaksanakan kenyataan create table di atas, kita boleh memasukkan beberapa data:
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, "php中文网")');
tx.executeSql('MASUKKAN KE DALAM LOG (id, log) NILAI (2, "www.php.cn")');
});
Kami juga boleh menggunakan nilai dinamik untuk memasukkan data:
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 (?, ?'), [e_id, e_log];
});
e_id dan e_log dalam contoh adalah pembolehubah luaran, executeSql akan peta tatasusunan Setiap entri dalam parameter memberikan "?"
Baca data
Contoh berikut menunjukkan cara membaca data yang sudah wujud dalam pangkalan data:
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, "php中文网")');
tx.executeSql('MASUKKAN KE DALAM LOG (id, log) NILAI (2, "www.php.cn")');
});
db.transaction(function (tx) {
tx.executeSql('PILIH * DARI LOG', [], fungsi (tx, hasil) {
var len = results.rows.length, i;
msg = "<p>Rekod pertanyaan Bilangan item: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
untuk (i = 0; i < len ; i++){
makluman(results.rows.item(i).log );
}
}, null);
});
Contoh lengkap
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(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中文网")');
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('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>Keputusan berjalan program:
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(function(tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
});
Kemas kini rekod
Kemas kini rekod menggunakan format berikut:
db. transaksi(fungsi (tx) {
tx.executeSql('KEMASKINI LOG SET log='www.w3cschool.cc' WHERE id=2');
});
Mengemas kini id data yang ditentukan juga boleh menjadi dinamik:
db.transaction(function(tx) {
tx.executeSql('UPDATE LOGS SET log= ' www.w3cschool.cc' WHERE id=?', [id]);
});
Kemas kini rekod
Format yang digunakan untuk mengemas kini rekod adalah seperti berikut:
db.transaction(function (tx) {
tx. executeSql( 'KEMASKINI LOG SET log='www.w3cschool.cc' WHERE id=2');
});
Kemas kini id data yang ditentukan juga boleh menjadi dinamik:
db.transaction(function(tx) {
tx.executeSql('LOG KEMASKINI SET log='www.w3cschool.cc' WHERE id=?' , [ id]);
});
Contoh penuh
rreeeHasil pelaksanaan program:
![Pertempuran sebenar Vue3 bahagian hadapan [projek vue tulisan tangan]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![Tutorial APIPOST [Popularisasi konsep teknikal yang berkaitan dengan komunikasi rangkaian]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
