HTML5本機資料庫實例詳解

Y2J
發布: 2018-05-12 14:46:42
原創
8926 人瀏覽過

HTML5的Web SQL Databases(html5 本地資料庫)的確很誘惑人,當你發現可以用與mysql查詢一樣的查詢語句來操作本地資料庫時,你會發現這東西挺有趣的。今天,我們一起來了解HTML 5的Web SQL Database API:openDatabase、transaction、executeSql。 Web SQL資料庫API其實不是HTML5規範的組成部分,而是單獨的規範。它透過一套API來操縱客戶端的資料庫。 Safari、Chrome、Firefox、Opera等主流瀏覽器都已經支援Web SQL Database。 HTML5的Web SQL Databases的確很誘惑人,當你發現可以用與mysql查詢一樣的查詢語句來操作本地資料庫時,你會發現這東西挺有趣的。今天,我們一起來了解HTML 5的Web SQL Database API。
下面將一一將介紹怎樣創建打開資料庫,創建表,添加數據,更新數據,刪除數據,刪除表 。
先介紹三個核心方法
1、openDatabase:這個方法使用現有資料庫或建立新資料庫建立資料庫物件
2、transaction:這個方法允許我們根據情況控制事務提交或回滾。
3、executeSql:這個方法用來執行真實的SQL查詢。
第一步:開啟連線並建立資料庫

程式碼如下:

var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { }); if (!dataBase) { alert("数据库创建失败!"); } else { alert("数据库创建成功!"); }
登入後複製

解釋openDatabase方法開啟已經存在的資料庫,如果資料庫不存在,它還可以建立資料庫。幾個參數意義分別是:
1,資料庫名稱。
2,版本號碼 目前為1.0,不管他,寫死就OK。
3,對資料庫的描述。
4,設定資料的大小。
5,回呼函數(可省略)。
初次呼叫時創建資料庫,以後就是建立連線了。
建立的資料庫就存在本地,路徑如下:
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\databases\http_localhost_4987 。
建立的是一個sqllite資料庫,可以用SQLiteSpy開啟文件,可以看到裡面的資料。 SQLiteSpy是一個綠色軟體,可以百度一下下載位址或SQLiteSpy官方下載:SQLiteSpy。
第二步:建立資料表

程式碼如下:

this.createTable=function() { dataBase.transaction( function(tx) { tx.executeSql( "create table if not exists stu (id REAL UNIQUE, name TEXT)", [], function(tx,result){ alert('创建stu表成功'); }, function(tx, error){ alert('创建stu表失败:' + error.message); }); }); }
登入後複製

解釋一下,
executeSql函數有四個參數,其意義分別是:
1)表示查詢的字串,使用的SQL語言是SQLite 3.6.19。
2)插入到查詢中問號所在處的字串資料。
3)成功時執行的回呼函數。傳回兩個參數:tx和執行的結果。
4)一個失敗時執行的回呼函數。傳回兩個參數:tx和失敗的錯誤訊息
第三步驟:執行增刪改查
1)新增資料:

#程式碼如下:

this.insert = function () { dataBase.transaction(function (tx) { tx.executeSql( "insert into stu (id, name) values(?, ?)", [id, '徐明祥'], function () { alert('添加数据成功'); }, function (tx, error) { alert('添加数据失败: ' + error.message); } ); });
登入後複製

2)查詢資料

程式碼如下:

this.query = function () { dataBase.transaction(function (tx) { tx.executeSql( "select * from stu", [], function (tx, result) { //执行成功的回调函数 //在这里对result 做你想要做的事情吧........... }, function (tx, error) { alert('查询失败: ' + error.message); } ); }); }
登入後複製

解釋一下
上面程式碼中執行成功的回呼函數有一參數result。

result:查詢出來的資料集。其資料型態為 SQLResultSet ,就如同C#中的DataTable。
SQLResultSet 的定義為:

程式碼如下:

interface SQLResultSet { readonly attribute long insertId; readonly attribute long rowsAffected; readonly attribute SQLResultSetRow List rows; };
登入後複製

其中最重要的屬性—SQLResultSetRowList 類型的 rows 是資料集的「行」 。
rows 有兩個屬性:length、item 。
故,取得查詢結果的某一行某一列的值 :result.rows[i].item[fieldname] 。

3)更新資料

程式碼如下:

this.update = function (id, name) { dataBase.transaction(function (tx) { tx.executeSql( "update stu set name = ? where id= ?", [name, id], function (tx, result) { }, function (tx, error) { alert('更新失败: ' + error.message); }); }); }
登入後複製

4)刪除資料

程式碼如下:

this.del = function (id) { dataBase.transaction(function (tx) { tx.executeSql( " delete from stu where id= ?", [id], function (tx, result) { }, function (tx, error) { alert('删除失败: ' + error.message); }); }); }
登入後複製

5 )刪除資料表

程式碼如下:

this.dropTable = function () { dataBase.transaction(function (tx) { tx.executeSql('drop table stu'); }); }
登入後複製

【相關推薦】

1.Html5免費影片教學

#2.H5製作計時器的程式碼示範

3.H5完成多重圖片上傳的實例詳解

4.詳解H5的自訂屬性data-*

5.教你如何實作一個H5微場景

以上是HTML5本機資料庫實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!