HTML 5 Web SQL Database Core Trident

Penulis：Eve Cole Waktu Pembaruan：2025-03-29 22:32:02

API database SQL Web sebenarnya tidak termasuk dalam spesifikasi HTML 5. Ini adalah spesifikasi independen yang memperkenalkan satu set API yang menggunakan SQL untuk mengoperasikan database klien. Dengan asumsi Anda adalah pengembang web yang sangat baik, tidak ada keraguan bahwa Anda sudah terbiasa dengan konsep yang terkait dengan SQL dan database. Jika Anda tidak terbiasa dengan SQL, lanjutkan membaca. Sebelum artikel ini, yang terbaik adalah mempelajari tutorial terkait SQL terlebih dahulu.

Versi terbaru Chrome, Safari, dan Opera semua mendukung database SQL Web.

Metode inti

Artikel ini akan memperkenalkan tiga metode inti yang ditentukan dalam spesifikasi:

1. OpenDatabase: Metode ini menggunakan database yang ada atau membuat database baru untuk membuat objek basis data.

2. Transaksi: Metode ini memungkinkan kita untuk mengontrol komitmen transaksi atau rollback sesuai dengan situasinya.

3. ExecutesQL: Metode ini digunakan untuk menjalankan kueri SQL nyata.

Buka database

Metode OpenDatabase membuka database yang ada. Jika database tidak ada, itu juga dapat membuat database. Sintaks untuk membuat dan membuka database adalah sebagai berikut:

 vardb = openDatabase ('mydb', '1.0', 'testdb', 2*1024*1024);

Metode OpenDatabase di atas menggunakan lima parameter berikut:

1. Nama Basis Data (MYDB)

2. Versi Nomor (1.0)

3. Deskripsi (tes db)

4. Ukuran Basis Data (2*1024*1024)

5. Buat panggilan balik

Yang terakhir, yaitu parameter kelima, membuat panggilan balik, yang akan dipanggil saat membuat database, tetapi bahkan tanpa parameter ini, database dapat dibuat saat runtime.

Jalankan kueri

Jalankan kueri menggunakan fungsi database.transaction (), yang hanya membutuhkan satu parameter, dan berikut ini adalah pernyataan kueri nyata:

 vardb = openDatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 db.transaction (function (tx) {
 tx.executesql ('createTableIfnotexistlogs (idunique, log)');
 });

Kueri di atas akan membuat tabel log di database MYDB.

Masukkan operasi

Untuk memasukkan catatan baru ke dalam tabel, kami menambahkan kueri SQL sederhana ke pernyataan kueri di atas, dan pernyataan yang dimodifikasi adalah sebagai berikut:

 vardb = openDatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 db.transaction (function (tx) {
 tx.executesql ('createTableIfnotexistlogs (idunique, log)');
 tx.executesql ('InsertIntologs (id, log) nilai (1, foobar)');
 tx.executesql ('InsertIntOlologs (id, log) nilai (2, logmsg)');
 });

Saat memasukkan catatan baru, kita juga dapat melewati nilai -nilai dinamis, seperti:

 vardb = openDatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 db.transaction (function (tx) {
 tx.executesql ('createTableIfnotexistlogs (idunique, log)');
 tx.executesql ('InsertIntologs
 (id, log) value (?,? '), [e_id, e_log];
 });

Di sini E_ID dan E_LOG adalah variabel eksternal, mengeksekusi MAPS setiap item? dalam parameter array.

Operasi baca

Jika Anda ingin membaca catatan yang sudah ada, kami menggunakan panggilan balik untuk menangkap hasilnya, kodenya adalah sebagai berikut:

 vardb = openDatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 db.transaction (function (tx) {
 tx.executesql ('createTableIfnotexistlogs (idunique, log)');
 tx.executesql ('InsertIntologs (id, log) nilai (1, foobar)');
 tx.executesql ('InsertIntOlologs (id, log) nilai (2, logmsg)');
 });
 db.transaction (function (tx) {
 tx.executesql ('pilih*fromlog', [], function (tx, hasil) {
 varlen = results.rows.length, i;
 msg = <p> foundrows:+len+</p>;
 document.queryselector ('#status'). innerHtml+= msg;
 untuk (i = 0; i <len; i ++) {
 waspada (results.rows.item (i) .log);
 }
 },batal);
 });

Contoh Lengkap

Akhirnya, kami menyajikan apa yang sebelumnya dijelaskan dalam dokumen HTML 5 lengkap, saat menggunakan browser untuk menguraikan dokumen HTML 5.

 <! Doctypehtml>
 <Html>
 <head>
 <ScriptType = Text/JavaScript>
 vardb = openDatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 Varmsg;
 db.transaction (function (tx) {
 tx.executesql ('createTableIfnotexistlogs (idunique, log)');
 tx.executesql ('InsertIntologs (id, log) nilai (1, foobar)');
 tx.executesql ('InsertIntOlologs (id, log) nilai (2, logmsg)');
 msg = '<p> LogMessageCreatedAndrowinserted. </p>';
 document.queryselector ('#status'). innerHtml = msg;
 });
 db.transaction (function (tx) {
 tx.executesql ('pilih*fromlog', [], function (tx, hasil) {
 varlen = results.rows.length, i;
 msg = <p> foundrows:+len+</p>;
 document.queryselector ('#status'). innerHtml+= msg;
 untuk (i = 0; i <len; i ++) {
 msg = <p> <b>+results.rows.item (i) .log+</b> </p>;
 document.queryselector ('#status'). innerHtml+= msg;
 }
 },batal);
 });
 </script>
 </head>
 <body>
 <Divid = statusName = Status> StatusMessage </div>
 </body>
 </html>

Di bawah ini adalah hasil output yang diproduksi dalam versi terbaru Safari atau Browser Opera.

 LOGMessageCreatedAndrowinserted.
 Foundrows: 2
 foobar
 logmsg