首頁 web前端 前端問答 html5用什麼資料庫

html5用什麼資料庫

May 03, 2021 am 09:05 AM
html5 資料庫

HTML5使用Web SQL資料庫,可用於暫時儲存資料。 Web SQL資料庫API其實不是HTML5規範的組成部分,而是單獨的規範;它透過一套API來操縱客戶端的資料庫。 Chrome、Firefox等主流瀏覽器都支援Web SQL資料庫。

html5用什麼資料庫

本教學操作環境:windows7系統、HTML5版、Dell G3電腦。

HTML5使用Web SQL資料庫。

html 5 本機資料庫(Web Sql Database)

#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_* 。
建立的是一個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 SQLResultSetRowList rows;
};
登入後複製

其中最重要的屬性—SQLResultSetRowList 類型的 rows 是資料集的「行」 。 
rows 有兩個屬性:length、item 。
故,取得查詢結果的第一行列名為name的值 :result.rows.item(0).name  。

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');
});
}
登入後複製

更多程式相關知識,請造訪:程式設計影片! !

以上是html5用什麼資料庫的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1674
14
CakePHP 教程
1429
52
Laravel 教程
1333
25
PHP教程
1278
29
C# 教程
1257
24
HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

mysql:簡單的概念,用於輕鬆學習 mysql:簡單的概念,用於輕鬆學習 Apr 10, 2025 am 09:29 AM

MySQL是一個開源的關係型數據庫管理系統。 1)創建數據庫和表:使用CREATEDATABASE和CREATETABLE命令。 2)基本操作:INSERT、UPDATE、DELETE和SELECT。 3)高級操作:JOIN、子查詢和事務處理。 4)調試技巧:檢查語法、數據類型和權限。 5)優化建議:使用索引、避免SELECT*和使用事務。

See all articles