Rumah > Artikel > hujung hadapan web > Adakah pangkalan data tempatan ciri baharu HTML5?

Adakah pangkalan data tempatan ciri baharu HTML5?

青灯夜游asal: 2022-01-23 16:41:181535semak imbas

Pangkalan data tempatan ialah ciri baharu html5. Html5 menyediakan sokongan pangkalan data sebelah penyemak imbas, membolehkan pembangun mencipta pangkalan data tempatan pada bahagian penyemak imbas secara langsung melalui JS API, dan menyokong operasi standard SQL CRUD, menjadikan aplikasi web luar talian lebih mudah untuk menyimpan data berstruktur .

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.

Walaupun Html5 telah menyediakan localStorage dan sessionStorage yang berkuasa, kedua-duanya hanya boleh menyediakan data untuk menyimpan struktur data ringkas dan tidak berkuasa untuk data aplikasi web yang kompleks. Apa yang luar biasa ialah Html5 menyediakan sokongan pangkalan data pada bahagian penyemak imbas, membolehkan kami mencipta pangkalan data setempat di bahagian penyemak imbas secara langsung melalui JS API, dan menyokong operasi SQL CRUD standard, menjadikan aplikasi web luar talian lebih mudah untuk menyimpan data tersusun . Seterusnya, kami akan memperkenalkan API yang berkaitan dan penggunaan data tempatan.

Langkah paling asas untuk mengendalikan pangkalan data tempatan ialah:

Langkah pertama: kaedah openDatabase: Cipta objek untuk mengakses pangkalan data.
Langkah 2: Gunakan objek akses pangkalan data yang dibuat pada langkah pertama untuk melaksanakan kaedah transaksi Melalui kaedah ini, anda boleh menyediakan kaedah tindak balas acara untuk memulakan transaksi dengan jayanya kaedah tindak balas.
Langkah 3: Jalankan pertanyaan melalui kaedah executeSql Sudah tentu, pertanyaan boleh: CRUD.

Seterusnya, kami akan memperkenalkan parameter dan penggunaan kaedah yang berkaitan.

(1) kaedah openDatabase:

//Demo：获取或者创建一个数据库，如果数据库不存在那么创建之
var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });

Kaedah openDatabase membuka pangkalan data sedia ada Jika pangkalan data tidak wujud, ia juga boleh mencipta pangkalan data. Maksud beberapa parameter ialah:

1, nama pangkalan data.
2. Nombor versi pangkalan data pada masa ini, 1.0 sudah tentu, anda tidak perlu mengisinya
3.
4. Tetapkan saiz pangkalan data yang diperuntukkan (unit ialah kb).
5, fungsi panggil balik (boleh diabaikan).
Buat pangkalan data apabila membuat panggilan buat kali pertama, dan kemudian buat sambungan.

(2) Kaedah db.transaction boleh menetapkan fungsi panggil balik Fungsi ini boleh menerima parameter yang menjadi objek transaksi yang kami mulakan. Kemudian skrip Sql boleh dilaksanakan melalui objek ini, yang boleh digabungkan dengan langkah-langkah berikut.

(3) Jalankan pertanyaan melalui kaedah executeSql.

ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)

Penerangan parameter:

qlQuery: Pernyataan SQL yang perlu dilaksanakan secara khusus, yang boleh dibuat, pilih, kemas kini, padam
nilai1 , nilai2.]: Tatasusunan semua parameter yang digunakan dalam penyataan sql, mula-mula gantikan parameter yang akan digunakan dalam penyataan s> letakkannya dalam parameter kedua
ataHandler: Fungsi panggil balik dipanggil apabila pelaksanaan berjaya, yang melaluinya set hasil pertanyaan boleh diperolehi
4, errorHandler: Fungsi panggil balik dipanggil apabila pelaksanaan gagal;

Berikut ialah contoh menyeluruh, anda boleh lihat:

<head>
 <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function initDatabase() {
            var db = getCurrentDb();//初始化数据库
            if(!db) {alert("您的浏览器不支持HTML5本地数据库");return;}
            db.transaction(function (trans) {//启动一个事务，并设置回调函数
                //执行创建表的Sql脚本
                trans.executeSql("create table if not exists Demo(uName text null,title text null,words text null)", [], function (trans, result) {
                }, function (trans, message) {//消息的回调函数alert(message);});
            }, function (trans, result) {
            }, function (trans, message) {
            });
        }
        $(function () {//页面加载完成后绑定页面按钮的点击事件
            initDatabase();
            $("#btnSave").click(function () {
                var txtName = $("#txtName").val();
                var txtTitle = $("#txtTitle").val();
                var txtWords = $("#txtWords").val();
                var db = getCurrentDb();
                //执行sql脚本，插入数据
                db.transaction(function (trans) {
                    trans.executeSql("insert into Demo(uName,title,words) values(?,?,?) ", [txtName, txtTitle, txtWords], function (ts, data) {
                    }, function (ts, message) {
                        alert(message);
                    });
                });
                showAllTheData();
            });
        });
        function getCurrentDb() {
            //打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小
            //如果数据库不存在那么创建之
            var db = openDatabase("myDb", "1.0", "it&#39;s to save demo data!", 1024 * 1024); ;
            return db;
        }
        //显示所有数据库中的数据到页面上去
        function showAllTheData() {
            $("#tblData").empty();
            var db = getCurrentDb();
            db.transaction(function (trans) {
                trans.executeSql("select * from Demo ", [], function (ts, data) {
                    if (data) {
                        for (var i = 0; i < data.rows.length; i++) {
                            appendDataToTable(data.rows.item(i));//获取某行数据的json对象
                        }
                    }
                }, function (ts, message) {alert(message);var tst = message;});
            });
        }
        function appendDataToTable(data) {//将数据展示到表格里面
            //uName,title,words
            var txtName = data.uName;
            var txtTitle = data.title;
            var words = data.words;
            var strHtml = "";
            strHtml += "<tr>";
            strHtml += "<td>"+txtName+"</td>";
            strHtml += "<td>" + txtTitle + "</td>";
            strHtml += "<td>" + words + "</td>";
            strHtml += "</tr>";
            $("#tblData").append(strHtml);
        }
    </script>
</head>
    <body>
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="txtName" id="txtName" required/></td>
            </tr>
               <tr>
                <td>标题：</td>
                <td><input type="text" name="txtTitle" id="txtTitle" required/></td>
            </tr>
            <tr>
                <td>留言：</td>
                <td><input type="text" name="txtWords" id="txtWords" required/></td>
            </tr>
        </table>
        <input type="button" value="保存" id="btnSave"/>
        <hr/>
        <input type="button" value="展示所哟数据" onclick="showAllTheData();"/>
        <table id="tblData">
        </table>
    </body>
</html>

Kesan pelaksanaan adalah seperti yang ditunjukkan dalam rajah:

Cadangan berkaitan: "tutorial video html》

Atas ialah kandungan terperinci Adakah pangkalan data tempatan ciri baharu HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Apakah kaedah pengesahan borang dalam html5?Artikel seterusnya：Apakah kaedah pengesahan borang dalam html5?

Artikel berkaitan

Lihat lagi