HTML5 tutorial html 5 local database (Web Sql Database)_html5 kemahiran tutorial

API Pangkalan Data Web SQL sebenarnya bukan sebahagian daripada spesifikasi HTML5, tetapi spesifikasi yang berasingan. Ia memanipulasi pangkalan data pelanggan melalui satu set API. Pelayar arus perdana seperti Safari, Chrome, Firefox dan Opera sudah menyokong Pangkalan Data Web SQL. Pangkalan Data SQL Web HTML5 sememangnya sangat menarik Apabila anda mendapati bahawa anda boleh menggunakan pernyataan pertanyaan yang sama seperti pertanyaan mysql untuk mengendalikan pangkalan data tempatan, anda akan mendapati perkara ini agak menarik. Hari ini, mari belajar tentang API Pangkalan Data SQL Web HTML 5.

Yang berikut akan memperkenalkan satu demi satu cara untuk mencipta dan membuka pangkalan data, mencipta jadual, menambah data, mengemas kini data, memadam data dan memadamkan jadual.

Mula-mula perkenalkan tiga kaedah teras

1 openDatabase: Kaedah ini menggunakan pangkalan data sedia ada atau mencipta pangkalan data baharu untuk mencipta objek pangkalan data.

2. Transaksi: Kaedah ini membolehkan kami mengawal penyerahan transaksi atau rollback mengikut situasi.

3. executeSql: Kaedah ini digunakan untuk melaksanakan pertanyaan SQL sebenar.

Langkah 1: Buka sambungan dan buat pangkalan data

Salin kod

Kodnya adalah seperti berikut:

var dataBase = openDatabase("student", "1.0", "Student Table", 1024 * 1024, function () { });
if ( !dataBase) {
makluman("Penciptaan pangkalan data gagal!");
} lain {
makluman("Pangkalan data berjaya dibuat!");
}

Terangkan Kaedah openDatabase membuka pangkalan data sedia ada dan juga boleh mencipta pangkalan data jika ia tidak wujud. Makna beberapa parameter ialah:
1, nama pangkalan data.
2. Nombor versi pada masa ini adalah 1.0 dan tulis sahaja.
3. Perihalan pangkalan data.
4. Tetapkan saiz data.
5, fungsi panggil balik (boleh diabaikan).
Buat pangkalan data apabila membuat panggilan buat kali pertama, dan kemudian buat sambungan.
Pangkalan data yang dicipta wujud secara setempat, dan laluannya adalah seperti berikut:
C:UsersAdministratorAppDataLocalGoogleChromeUser DataDefaultdatabaseshttp_localhost_4987.
Apa yang dibuat ialah pangkalan data sqllite Anda boleh menggunakan SQLiteSpy untuk membuka fail dan melihat data di dalamnya. SQLiteSpy ialah perisian hijau Anda boleh memuat turunnya dari Baidu atau alamat muat turun rasmi SQLiteSpy: SQLiteSpy.


Langkah 2: Buat jadual data

Salin kod

Kodnya adalah seperti berikut:

this.createTable=function() {
dataBase.transaction( function(tx) {
tx.executeSql(
"create table if not wujud stu (id REAL UNIQUE, name TEXT)",
[],
function(tx,result){ alert('Jadual Stu berjaya dibuat'); },
function(tx, error){ alert( 'Gagal mencipta jadual stu:' error.message);
});
});
}

Terangkan,
executeSql function mempunyai empat Parameter, maksudnya ialah:
1) Mewakili rentetan pertanyaan dan bahasa SQL yang digunakan ialah SQLite 3.6.19.
2) Data rentetan yang dimasukkan ke dalam pertanyaan di mana tanda soal berada.
3) Fungsi panggil balik dilaksanakan apabila berjaya. Mengembalikan dua parameter: tx dan hasil pelaksanaan.
4) Fungsi panggil balik dilaksanakan apabila kegagalan berlaku. Mengembalikan dua parameter: tx dan mesej ralat kegagalan.



Langkah 3: Lakukan pemeriksaan penambahan, pemadaman dan pengubahsuaian

1) Tambah data:

Salin kod

Kod adalah seperti berikut:

this.insert = function () {
dataBase.transaction(function ( tx) {
tx.executeSql(
"masukkan ke dalam stu (id, nama) nilai(?, ?)",
[id, 'Xu Mingxiang'],
fungsi () { makluman ('Data berjaya ditambah' ); },
fungsi (tx, ralat) { alert('Gagal menambah data: ' error.message);
});

2) Data pertanyaan

Salin kod Kod adalah seperti berikut:

ini .query = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"select * from stu", [],
fungsi (tx, hasil) { / /Fungsi panggil balik untuk pelaksanaan yang berjaya
//Lakukan apa yang anda mahu lakukan dengan hasil di sini.....
},
fungsi (tx, ralat) {
makluman('Pertanyaan gagal: ' error.message);
} );
});
}



Terangkan
Fungsi panggil balik yang berjaya dilaksanakan dalam kod di atas mempunyai hasil parameter.

hasil: set data yang ditanya. Jenis datanya ialah SQLResultSet, sama seperti DataTable dalam C#.
SQLResultSet ditakrifkan sebagai:

Salin kod

Kod tersebut adalah seperti berikut:

antara muka SQLResultSet {
atribut baca sahaja insertId panjang;
atribut baca sahaja long rowsAffected;
atribut baca sahaja baris SQLResultSetRowList;
};

Atribut yang paling penting>baris mempunyai dua atribut: panjang dan item.
Jadi, dapatkan nilai baris dan lajur tertentu hasil pertanyaan: result.rows[i].item[fieldname].

3) Kemas kini data

Salin kodKod adalah seperti berikut:

this.update = function (id, name) {
dataBase.transaction(function (tx) {
tx.executeSql(
"update stu set name = ? where id= ?",
[nama, id],
fungsi (tx, hasil) {
},
fungsi (tx, ralat) {
makluman('Kemas kini gagal: ' error.message );
});
});
}

4) Padam data

Salin kodKod adalah seperti berikut:

this.del = function (id) {
dataBase.transaction(function (tx ) {
tx .executeSql(
"delete from stu where id= ?",
[id],
function (tx, result) {
},
function (tx , ralat) {
alert('Pemadaman gagal: ' error.message);
});
});
}

5) Padamkan jadual data

Salin kodKodnya adalah seperti berikut:

ini .dropTable = function () {
dataBase.transaction(function (tx) {
tx.executeSql('drop table stu');
});
}

pangkalan data sql web ditambahkan Padam dan ubah suai demo,
klik untuk memuat turun.