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

rreee

Hasil pelaksanaan program:

Meneruskan pembelajaran

fail baharu

<!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>

serahkan Tetapkan Semula Kod

Operasi automatik

HTML5 Web SQL

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]