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 SQLResultSetRowList 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');
});
}
Ⅱ html5是什麼干什麼的
就主要而言，HTML是一種標記語言，是網頁的規范編程語言
1.主要適用於面向Web編程
【例如】Wechat公眾號的部分HTML5小游戲，Web端的網頁包括網路/谷歌都是使用HTML的
【圖片例子】Google搜索界面和Bai圖片界面
【特點】一個網頁可以包含圖像，圖形，視頻，音頻，文字，動畫等不同的多媒體信息，網頁主要適用HTTP/FTP協議，遍布各個范疇，任何一個編程語言都必須被轉化為純HTML格式才可以被讀取，因此其在互聯網上是很高的地位。
Ⅲ H5是什麼編程語言嗎
H5是指HTML5，它萬維網的核心語言、標准通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改。
HTML5提供了一些新的元素和屬性，例如<nav>（網站導航塊）和<footer>。這種標簽將有利於搜索引擎的索引整理，同時更好的幫助小屏幕裝置和視障人士使用，除此之外，還為其他瀏覽要素提供了新的功能，如<audio>和<video>標記。
它有以下改進：
1、取消了一些過時的HTML4標記
其中包括純粹顯示效果的標記，如<font>和<center>，它們已經被CSS取代。
2、將內容和展示分離
b和i標簽依然保留，但它們的意義已經和之前有所不同，這些標簽的意義只是為了將一段文字標識出來，而不是為了為它們設置粗體或斜體式樣。u，font，center，strike 這些標簽則被完全去掉了。
3、一些全新的表單輸入對象
包括日期，URL，Email 地址，其它的對象則增加了對非拉丁字元的支持。HTML5 還引入了微數據，這一使用機器可以識別的標簽標注內容的方法，使語義Web 的處理更為簡單。
4、全新的，更合理的Tag
多媒體對象將不再全部綁定在object或 embed Tag 中，而是視頻有視頻的Tag，音頻有音頻的 Tag。
5、本地資料庫
這個功能將內嵌一個本地的SQL資料庫，以加速互動式搜索，緩存以及索引功能。同時，那些離線Web 程序也將因此獲益匪淺。不需要插件的豐富動畫。
6、Canvas 對象
將給瀏覽器帶來直接在上面繪制矢量圖的能力，這意味著用戶可以脫離Flash Silverlight，直接在瀏覽器中顯示圖形或動畫。
7、瀏覽器中的真正程序
將提供API實現瀏覽器內的編輯，拖放，以及各種圖形用戶界面的能力。內容修飾Tag 將被剔除，而使用CSS。
8、Html5取代Flash在移動設備的地位。
9、其突出的特點就是強化了web頁的表現性,追加了本地資料庫,
(3)h5sql擴展閱讀：
HTML5的未來趨勢：
1、移動優先
從如今層出不窮的移動應用就知道，在這個智能手機和平板電腦大爆炸的時代，移動優先已成趨勢，不管是開發什麼，都是以移動為主。
2、游戲開發者領銜「主演」
許多游戲開發商都被Facebook或者Zynga推動著發展，而未來的Facebook應用生態系統是基於HTML5的，盡管在HTML5平台開發出遊戲非常困難，但游戲開發商卻都願意那麼做。
通過PhoneGap及appmobi的XDK將Web應用游戲打包整合到原生應用中也是一種方式，Facebook差不多就這么乾的——基於Web應用及瀏覽器，但卻將之打包整合進原生應用。
Ⅳ 求大神來一段用H5編寫的連接sql server資料庫的代碼，必有重謝
H5是前端語言，前端無法連接資料庫，目前只有後端語言可以連接資料庫，前端通過ajax或者其他形式的介面與後端語言通訊，常見的後端語言有asp.net,php,java,因為前端語言可見，可以調試，如果能夠直接連接資料庫會造成很大的安全隱患
Ⅳ HTML5的5種存儲方式詳解
引言
本篇文章主要介紹了前端HTML5幾種存儲方式的總結 ，主要包括本地存儲localstorage，本地存儲sessionstorage，離線緩存（application cache），Web SQL，IndexedDB。有興趣的可以了解一下。
正文開始~
h5之前，存儲主要是用cookies。cookies缺點有在請求頭上帶著數據，大小是4k之內。主Domain污染。
主要應用：購物車、客戶登錄
對於IE瀏覽器有UserData，大小是64k,只有IE瀏覽器支持。
目標
存儲方式：
以鍵值對(Key-Value)的方式存儲，永久存儲，永不失效，除非手動刪除。
大小：
每個域名5M
支持情況：
注意：IE9 localStorage不支持本地文件，需要將項目署到伺服器，才可以支持！
常用的API：
getItem //取記錄
setIten//設置記錄
removeItem//移除記錄
key//取key所對應的值
clear//清除記錄
存儲的內容：
數組，圖片，json，樣式，腳本。。。（只要是能序列化成字元串的內容都可以存儲）
HTML5 的本地存儲 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的，區別在於 sessionStorage 在關閉頁面後即被清空，而 localStorage 則會一直保存。
本地緩存應用所需的文件
使用方法：
①配置manifest文件
頁面上：
Manifest 文件：
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。
manifest 文件可分為三個部分：
①CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
②NETWORK - 在此標題下列出的文件需要與伺服器的連接，且不會被緩存
③FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
完整demo：
伺服器上： manifest文件需要配置正確的MIME-type，即 "text/cache-manifest"。
如Tomcat:
常用API：
核心是applicationCache對象，有個status屬性，表示應用緩存的當前狀態：
0（UNCACHED） : 無緩存， 即沒有與頁面相關的應用緩存
1（IDLE） : 閑置，即應用緩存未得到更新
2 （CHECKING） : 檢查中，即正在下載描述文件並檢查更新
3 （DOWNLOADING） : 下載中，即應用緩存正在下載描述文件中指定的資源
4 （UPDATEREADY） : 更新完成，所有資源都已下載完畢
5 （IDLE） : 廢棄，即應用緩存的描述文件已經不存在了，因此頁面無法再訪問應用緩存
相關的事件：
表示應用緩存狀態的改變：
checking : 在瀏覽器為應用緩存查找更新時觸發
error : 在檢查更新或下載資源期間發送錯誤時觸發
noupdate : 在檢查描述文件發現文件無變化時觸發
downloading : 在開始下載應用緩存資源時觸發
progress：在文件下載應用緩存的過程中持續不斷地下載地觸發
updateready : 在頁面新的應用緩存下載完畢觸發
cached : 在應用緩存完整可用時觸發
Application Cache的三個優勢：
① 離線瀏覽
② 提升頁面載入速度
③ 降低伺服器壓力
注意事項：
1. 瀏覽器對緩存數據的容量限制可能不太一樣（某些瀏覽器設置的限制是每個站點 5MB）
2. 如果manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視為失敗，瀏覽器繼續全部使用老的緩存
3. 引用manifest的html必須與manifest文件同源，在同一個域下
4. 瀏覽器會自動緩存引用manifest文件的HTML文件，這就導致如果改了HTML內容，也需要更新版本才能做到更新。
6. FALLBACK中的資源必須和manifest文件同源
7. 更新完版本後，必須刷新一次才會啟動新版本（會出現重刷一次頁面的情況），需要添加監聽版本事件。
8. 站點中的其他頁面即使沒有設置manifest屬性，請求的資源如果在緩存中也從緩存中訪問
9. 當manifest文件發生改變時，資源請求本身也會觸發更新
離線緩存與傳統瀏覽器緩存區別：
1. 離線緩存是針對整個應用，瀏覽器緩存是單個文件
2. 離線緩存斷網了還是可以打開頁面，瀏覽器緩存不行
3. 離線緩存可以主動通知瀏覽器更新資源
關系資料庫，通過SQL語句訪問
Web SQL 資料庫 API 並不是 HTML5 規范的一部分，但是它是一個獨立的規范，引入了一組使用 SQL 操作客戶端資料庫的 APIs。
支持情況：
Web SQL 資料庫可以在最新版的 Safari, Chrome 和 Opera 瀏覽器中工作。
核心方法：
①openDatabase： 這個方法使用現有的資料庫或者新建的資料庫創建一個資料庫對象。
②transaction： 這個方法讓我們能夠控制一個事務，以及基於這種情況執行提交或者回滾。
③executeSql： 這個方法用於執行實際的 SQL 查詢。
打開資料庫：
執行查詢操作：
插入數據：
讀取數據：
由這些操作可以看出，基本上都是用SQL語句進行資料庫的相關操作，如果你會MySQL的話，這個應該比較容易用。
索引資料庫 (IndexedDB) API（作為 HTML5 的一部分）對創建具有豐富本地存儲數據的數據密集型的離線 HTML5 Web 應用程序很有用。同時它還有助於本地緩存數據，使傳統在線 Web 應用程序（比如移動 Web 應用程序）能夠更快地運行和響應。
非同步API：
在IndexedDB大部分操作並不是我們常用的調用方法，返回結果的模式，而是請求——響應的模式，比如打開資料庫的操作
這樣，我們打開資料庫的時候，實質上返回了一個DB對象，而這個對象就在result中。由上圖可以看出，除了result之外。還有幾個重要的屬性就是onerror、onsuccess、onupgradeneeded（我們請求打開的資料庫的版本號和已經存在的資料庫版本號不一致的時候調用）。這就類似於我們的ajax請求那樣。我們發起了這個請求之後並不能確定它什麼時候才請求成功，所以需要在回調中處理一些邏輯。
關閉與刪除：
數據存儲：
indexedDB中沒有表的概念，而是objectStore，一個資料庫中可以包含多個objectStore，objectStore是一個靈活的數據結構，可以存放多種類型數據。也就是說一個objectStore相當於一張表，裡面存儲的每條數據和一個鍵相關聯。
我們可以使用每條記錄中的某個指定欄位作為鍵值（keyPath），也可以使用自動生成的遞增數字作為鍵值（keyGenerator），也可以不指定。選擇鍵的類型不同，objectStore可以存儲的數據結構也有差異。
學習從來不是一個人的事情，要有個相互監督的夥伴，想要學習或交流前端問題的小夥伴可以私信「學習」小明獲取web前端入門資料，一起學習，一起成長！
Ⅵ html5 web sql遇到的問題求幫助
第一，你對技術不夠了解，無法體現精髓。
第二，凡是新的都不一定能普遍應用，而不能普遍應用的，價值也就不高咐老舉。
可以聯想一下真正的大廚比賽，凡是用料最奢華、搞得最繽紛的菜，一定會敗給外表樸素內容卻不平淡但也絕不是簡單的強烈刺激的菜，因為真正比含衫拼的是製作者的各方面基本功和對衡碧色香味意境界的理解。
因此，哪怕兩個人在境界和功夫上真的具有相同的水平，那麼選擇樸素平常的也比選擇奢華新奇的要得分高，因為他更自信。
Ⅶ HTML5的 web sql 中數據，如何批量導入/導出
不能批量導入，可以生成SQL語句的JS文件，判斷數據後執行JS進行導入即可。
Ⅷ html5怎麼連接資料庫
在HTML5之前的時代，如果需要在客戶端本地保存數據，只能存儲在Cookie中，但是 Cookie使用過多會影響請求速度 ，所以並不適合存儲大量數據。
而在HTML5面世後，自帶了本地存儲和本地資料庫功能，更為便捷的管理客戶端數據。
HTML5提供了一個 基於瀏覽器端的資料庫 （WebSQL 、IndexedDB），我們可以通過JS API來在瀏覽器端創建一個本地資料庫，而且它還支持標準的SQL來執行CRUD操作。
如何查看本地的資料庫呢？通過各個 瀏覽器的調試工具 可以查看。
在HTML5中操作本地資料庫都是通過JS API來實現的，很簡單，步聚如下：
1、通過 openDatabase 創建資料庫對象
2、通過 db.transaction 設置回調函數
3、通過 executeSql 方法執行查詢
HTML5默認情況下是無法連接遠程資料庫的，一般都是通過API去操作資料庫。比如當下流行的前後端完全分離，藉助的就是RESTful來實現業務數據的CRUD操作。
怎麼會問這個問題，HTML是不可能鏈接資料庫的，他是標簽類語言，是用於構建靜態頁面的，要想鏈接資料庫必須得支持網路通信和IO的，顯然HTML並沒有支持，HTML只是用來設計頁面的。
我還以為我落伍了，h5連資料庫
Ⅸ H5用戶登錄測試用例
輸入已注冊的用戶名和正確的密碼，驗證是否登錄成功；
輸入已注冊的用戶名和不正確的密碼，驗證是否登錄失敗，並且提示信息正確；
輸入未注冊的用戶名和任意密碼，驗證是否登錄失敗，並且提示信息正確；
輸入未激活的、已鎖定的、被注銷的用戶名和正確密碼，驗證是否登錄成功；
用戶名和密碼兩者都為空，驗證是否登錄失敗，並且提示信息正確；
用戶名和密碼兩者之一為空，驗證是否登錄失敗，並且提示信息正確；
第一次登錄失敗，再次輸入正確的用戶名和密碼，驗證是否登錄成功；
如果登錄功能啟用了驗證碼功能，用戶名、密碼、驗證碼都輸入正確，驗證是否登錄成功；
如果登錄功能啟用了驗證碼功能，用戶名、密碼正確，驗證碼輸入錯誤，驗證是否登錄失敗，皮型並且提示信息正確；
點擊驗證碼圖片是否可以更換驗證碼，更換後的驗證碼是否可用；
刷新頁面是否會刷新驗證碼，刷新後的驗證碼是否可用；
如果驗證碼具有時效性，需要分別驗證時效內和時效外驗證碼的有效性；
無網路模式下登錄，是否給出「網路未連接」或「網路異常」的提示；
第一次登錄請求超時後（伺服器出問題，隨後恢復正常），再次請求登錄能否登錄成功。
頁面默認焦點是否定位在用戶名的輸入框中；
快捷鍵 Tab 和 Enter 等，是否可以正常使用；
用戶名和密碼是否大小寫、空格敏感；
使用中文、英文鍵盤輸入字母傳給後端的字元長度是否一致；
前端頁面是否根據設計要求限制用戶名和密碼長度，且前後台都需要限制；
頁面上的密碼框是否加密顯示，是否需要設置明暗碼切換按鈕；
輸入欄是否設置快速刪除按鈕；
忘記用戶名和忘記密碼的功能是否可用；
修改密碼後，是否重定向到登錄頁面；
修改密碼後，原密碼是否作廢不可用；
在其他終端修改密碼後，PC端是否自動下線，若下線後，使用原密碼能否繼續登錄；
使用默認密碼第一次登錄成功時，是否提示修改密碼；
第一次登錄成功，是否會同步其他終端用戶信息；
用戶登錄成功但是會話超時後，繼續操作是否會重定向到用戶登錄界面；
不同級別的用戶，比如管理員用戶和普通用戶，登錄系統後的許可權是否正確；
輸入錯誤密碼的限制次數：
分別測試最大值-1、最大值、最大值+1 時的輸錯密碼情況；
超過最大次數限制後，是否採取強制手段限制登錄或對賬號暫時凍結處理；
超過最大次數限制後，分別輸入正確的密碼和錯誤的密碼再次登錄。
用戶名、密碼、驗證碼輸入框是否不支持復制和粘貼；
密碼輸入框內輸入的密碼是否都可以在頁面源碼模式下被查看；
用戶密碼後台存儲是否加密；
用戶密碼在網路傳輸過程中是否加密；
密碼是否具有「有效期」，密碼有效期到期後，是否提示需要修改密碼；
是否可記住密碼，記住的密碼保存是否加密；
記住密碼是否有「有效期」，若有「有效期」，過期之後是否會清岩蘆空密碼；
登錄成功後的session時效設置；
登錄錯誤後的提示是否有安全隱患；
退出登錄後再次登錄，使用記住的密碼，是否登錄成功；
不登錄的情況下，在瀏覽器中直接輸入登錄後的 URL 地址，驗證是否會重新定向到用戶登錄界面；
用戶登錄過程中log中是否有個人信息明文列印
用戶名和密碼的輸入框中分別輸入典型的「SQL 注入攻擊」字元串，驗證系統的返回頁面；
用戶名和密碼的輸入框中分別輸入典型的「XSS 跨站腳本攻擊」字元串，驗證系統行為是否被篡改；
連續多次登錄失敗情況下，系統是否會阻止後續的嘗試以應對暴力破解；
登錄後輸入登錄URL，是否還能再次登錄？如果能，原登錄用戶是否變得無效；
同用戶同終端的多種瀏覽器上登錄，驗證登錄功能的互斥性是否符合設計預期；
同用戶不同終端，先後登錄，驗證登錄是否具有互斥性；
同用戶同瀏覽器已經登錄，再次打開一個標簽頁時，是否需要重新登錄；
不同用戶在同終端同瀏覽器登錄，驗證登錄信息token的正確性；
不同用戶在同終端同瀏覽器登錄，被踢後，頁面是否會跳轉到登錄頁；
是否支持第三方登錄，如微信、QQ、微博；
是否允許第三方工具平台存儲密碼；
是否可以使用登錄的API發送登錄請求，並繞開驗證碼校驗燃棗猜；
是否可以用抓包工具抓到的請求包直接登錄；
截取到的token等信息，是否可以在其他終端上直接使用，繞開登錄。token過期時間校驗；
性能壓力測試用例:
單用戶登錄的響應時間是否小於 3 秒；
單用戶登錄時，後台請求數量是否過多；
高並發場景下用戶登錄的響應時間是否小於 5 秒；
高並發場景下服務端的監控指標是否符合預期；
高集合點並發場景下，是否存在資源死鎖和不合理的資源等待；
長時間大量用戶連續登錄和登出，伺服器端是否存在內存泄漏。
兼容性測試用例：
不同瀏覽器下，驗證登錄頁面的顯示以及功能正確性；
相同瀏覽器的不同版本下，驗證登錄頁面的顯示以及功能正確性；
不同移動設備終端的不同瀏覽器下，驗證登錄頁面的顯示以及功能正確性；
不同解析度的界面下，驗證登錄頁面的顯示以及功能正確性；
網路延遲或者弱網或者切換網路或者斷網時正常登錄是否正常
Ⅹ hbuilder 中H5的websql 製作APP android或ios都可以使用么
遇到問題應該是這樣解決的岩孝： 1.盡力去檢查自己辯棗搜的代碼，看有無低級錯誤； 2.Google之（這個一定要會，屬於基本技能。。。） 3.實在找不到錯誤，詢問周邊的朋友同事等（有時你自己看半天看不出的錯誤，他們可能會一眼就看出來了） 4.去相關網站提問，如stackoverflow、segmentfault等 只有這樣你才能更攜歷快的提高。。。