HTML5 Web SQL Database
Web SQL Database API bukan bagian dari HTML5 spesifikasi, tetapi merupakan spesifikasi yang terpisah, memperkenalkan satu set API untuk menggunakan database SQL operasi klien.
Jika Anda seorang belakang end Web programmer, harus mudah untuk memahami operasi SQL.
Anda juga dapat merujuk ke kami SQL tutorial untuk mempelajari lebih lanjut operasi database pengetahuan.
Web SQL database dapat bekerja dalam versi terbaru dari Safari, Chrome dan browser Opera.
metode inti
Berikut adalah tiga metode inti didefinisikan dalam spesifikasi:
- opendatabase: Metode ini menggunakan database yang sudah ada atau membuat database objek database baru.
- Transaksi: Metode ini memungkinkan kita untuk mengontrol transaksi, dan berdasarkan hal ini melakukan atau rollback.
- executeSql: Metode ini digunakan untuk melakukan query SQL yang sebenarnya.
Open database
Kita dapat menggunakan metode OpenDatabase () untuk membuka database yang sudah ada, jika database tidak ada, membuat database baru, gunakan kode berikut:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
OpenDatabase () metode dari lima parameter yang sesuai dengan deskripsi:
- Nama database
- Nomor versi
- Keterangan Teks
- Ukuran database
- Buat callback
Parameter kelima, membuat callback akan dipanggil setelah membuat database.
Untuk melakukan operasi kueri
Eksekusi menggunakan database.transaction () fungsi:
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 di atas membuat tabel bernama LOGS di 'mydb' database setelah eksekusi.
memasukkan data
Setelah mengeksekusi pernyataan di atas untuk membuat tabel, kita dapat memasukkan beberapa data:
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.w3big.com")');
});
Kita juga bisa menggunakan nilai dinamis untuk memasukkan data:
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];
});
Misalnya e_id e_log dan variabel eksternal, executeSql parameter array dipetakan untuk setiap entri dalam "?."
membaca data
Contoh berikut menunjukkan cara membaca data yang sudah dalam database:
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.w3big.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);
});
contoh lengkap
<!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.w3big.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>
Contoh hasil operasi di atas seperti yang ditunjukkan di bawah ini:
Hapus Rekor
Format menghapus catatan adalah sebagai berikut:
db.transaction(function (tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
});
Menghapus data id ditentukan juga bisa dinamis:
db.transaction(function(tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
});
Perbarui Rekor
Update catatan menggunakan format berikut:
db.transaction(function (tx) {
tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
});
Update data id ditentukan juga bisa dinamis:
db.transaction(function(tx) {
tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
});
contoh lengkap
<!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.w3big.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>
Contoh hasil operasi di atas seperti yang ditunjukkan di bawah ini:
