HTML5教程第四篇 - websql

HTML4教程
上一篇
博主個人主頁
博主視頻教程

前言

這一篇我們簡單來說一下WebSql ，Web SQL 數據庫 API 並不是 HTML5 規範的一部分，但是它是一個獨立的規範，引入了一組使用 SQL 操作客戶端數據庫的 API ， SQL如果學習過數據庫的同學應該非常熟悉了 就是用來操作數據的 比如增刪改查 等等 ，Web SQL 數據庫可以在最新版的 Safari, Chrome 和 Opera 瀏覽器中工作。

起步

以下是規範中定義的三個核心方法

• openDatabase：這個方法使用現有的數據庫或者新建的數據庫創建一個數據庫對象。
• transaction：這個方法讓我們能夠控制一個事務，以及基於這種情況執行提交或者回滾。
• executeSql：這個方法用於執行實際的 SQL 查詢。

openDatabase() 方法對應的五個參數說明：

• 數據庫名稱
• 版本號
• 描述文本
• 數據庫大小 以字節爲單位

transaction

• 創建獲取數據回調
• 錯誤回調

executeSql

• SQL 語句 可以是增刪改查
• 參數化查詢所需要的值
• 回調函數 獲取到查詢的數據

openDatabase 方法使用

• 我們可以使用 openDatabase() 方法來打開已存在的數據庫，如果數據庫不存在，則會創建一個新的數據庫

var db = openDatabase('mywebdb', '1.0.0', 'test', 2*1024);

transaction方法使用

通過db對象可以調用在這個方法 傳遞一個回調函數 第一個是成功的 第二個回調函數是錯誤的回調函數 第一個回調函數接受一個tx對象 可以調用executeSQL方法執行SQL語句

 db.transaction(function (tx) {
           console.log(tx);
         },function (err) {
             console.log(err);
         });

executeSQL方法使用

db.transaction(function (tx) {
             tx.executeSql('CREATE TABLE IF NOT EXISTS INFO (id unique, name)');
             tx.executeSql('INSERT INTO INFO (id, name) VALUES (1, "Lusn")');
             tx.executeSql('INSERT INTO INFO (id, name) VALUES (2, "liwenxiang.top")');
         })

寫完這些代碼後 運行頁面 這句話的意思就是創建了一個數據庫 名字叫 INFO 刷新瀏覽器之後我們去查看對應的數據

就顯示出對應的數據

瞭解過SQL的人可能會比較輕鬆就理解了

剛剛實現了增加數據 我們來看一下查詢數據

         db.transaction(function (tx) {
             tx.executeSql('SELECT * FROM INFO WHERE id = ?', [1], function (tx, results) {
                 let len = results.rows.length, i;
                 console.log(len);
                 console.log(results.rows);
             }, null);
         },function (err) {
             console.log(err);
         });

這就是查詢數據 需要傳入SQL語句 如果有佔位符的話需要在第二個參數傳遞 ？就是佔位符 參數傳遞要和？出現的順序一致哦~ 回調函數就是 對應的結果集 和 事務對象啦 我們有了tx對象還可以繼續查詢

我們來看一下刪除

         db.transaction(function (tx) {
             tx.executeSql('DELETE FROM  INFO WHERE id = ?', [1]);
         },function (err) {
             console.log(err);
         });

以上代碼就是刪除 語句則是對應的刪除的SQL語句 會刪除表中的數據 佔位符還是和查詢的意思一樣

更新數據

         db.transaction(function (tx) {
             tx.executeSql('UPDATE INFO SET name="lwx" WHERE id=2');
         });

這就修改了數據 更換爲修改的SQL語句

我們看到數據就發生變化了

下一篇

結語

好了 這就是基本的websql的使用 ~~~