⑴ html5 database storage查詢怎麼用
通過openDatabase方法創建一個訪問資料庫的對象
var db = openDatabase(databasename,version,description,size) ;
該方法有四個參數，作用分別為：
databasename:資料庫名；
version：資料庫版本號，可不填；
description：資料庫描述；
size：給資料庫分配的空間大小；
使用第一步創建的資料庫訪問對象（如db）執行transaction方法，用來執行事務處理，關於資料庫的所有操作都需要在這裡面進行，如執行查詢
db.transaction(function(tx)){
//執行訪問資料庫的語句
tx.executesql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
});
通過executeSql方法執行查詢，就是上面transaction中執行查詢用到的方法。通過上面我們可以看出executeSql要在transaction中執行。下面詳細介紹一下executeSql的參數和使用。
tx.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
tx是transaction中傳遞過來的事務處理對象。
executeSql方法有四個參數，作用分別如下：
sqlQuery：需要具體執行的sql語句，可以是create、select、update、delete；
[value1,value2..]：sql語句中所有使用到的參數的數組，在executeSql方法中，將sql語句中所要使用的參數先用「?」代替，然後依次將這些參數組成數組放在第二個參數中；
dataHandler：執行成功是調用的回調函數，通過該函數可以獲得查詢結果集；
errorHandler：執行失敗時調用的回調函數；
下面就做一個完整的實例，大家可以把代碼復制下來存到一個html頁面中，用chorme或火狐等支持html5的瀏覽器查看效果
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>HTML5本地存儲之本地資料庫篇</title>
<script type="text/javascript">
//打開資料庫
var db = openDatabase('contactdb','','local database demo',204800);
//保存數據
function save(){
var user_name = document.getElementById("user_name").value;
var mobilephone = document.getElementById("mobilephone").value;
var company = document.getElementById("company").value;
//創建時間
var time = new Date().getTime();
db.transaction(function(tx){
tx.executeSql('insert into contact values(?,?,?,?)',[user_name,mobilephone,company,time],onSuccess,onError);
});
}
//sql語句執行成功後執行的回調函數
function onSuccess(tx,rs){
alert("操作成功");
loadAll();
}
//sql語句執行失敗後執行的回調函數
function onError(tx,error){
alert("操作失敗，失敗信息："+ error.message);
}
//將所有存儲在sqlLite資料庫中的聯系人全部取出來
function loadAll(){
var list = document.getElementById("list");
db.transaction(function(tx){
//如果數據表不存在，則創建數據表
tx.executeSql('create table if not exists contact(name text,phone text,company text,createtime INTEGER)',[]);
//查詢所有聯系人記錄
tx.executeSql('select * from contact',[],function(tx,rs){
if(rs.rows.length>0){
var result = "<table>";
result += "<tr><th>序號</th><th>姓名</th><th>手機</th><th>公司</th><th>添加時間</th><th>操作</th></tr>";
for(var i=0;i<rs.rows.length;i++){
var row = rs.rows.item(i);
//轉換時間，並格式化輸出
var time = new Date();
time.setTime(row.createtime);
var timeStr = time.format("yyyy-MM-dd hh:mm:ss");
//拼裝一個表格的行節點
result += "<tr><td>"+(i+1)+"</td><td>"+row.name+"</td><td>"+row.phone+"</td><td>"+row.company+"</td><td>"+timeStr+"</td><td><input type='button' value='刪除' onclick='del("+row.phone+")'/></td></tr>";
}
list.innerHTML = result;
}else{
list.innerHTML = "目前數據為空，趕緊開始加入聯系人吧";
}
});
});
}
//刪除聯系人信息
function del(phone){
db.transaction(function(tx){
//注意這里需要顯示的將傳入的參數phone轉變為字元串類型
tx.executeSql('delete from contact where phone=?',[String(phone)],onSuccess,onError);
});
}
//格式化時間的format函數
Date.prototype.format = function(format)
{
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
(this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length==1 ? o[k] :
("00"+ o[k]).substr((""+ o[k]).length));
return format;
}
</script>
<style>
.addDiv{
border: 2px dashed #ccc;
width:400px;
text-align:center;
}
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
}
td {
border-right: 1px solid #C9DAD7;
border-bottom: 1px solid #C9DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
</style>
</head>
<body onload="loadAll()">
<div class="addDiv">
<label for="user_name">姓名：</label>
<input type="text" id="user_name" name="user_name" class="text"/>
<br/>
<label for="mobilephone">手機：</label>
<input type="text" id="mobilephone" name="mobilephone"/>
<br/>
<label for="mobilephone">公司：</label>
<input type="text" id="company" name="company"/>
<br/>
<input type="button" onclick="save()" value="新增記錄"/>
</div>
<br/>
<div id="list">
</div>
</body>
</html>
⑵ h5是什麼意思
HTML5是構建Web內容的一種語言描述方式。
HTML5是構建Web內容的一種語言描述方式。HTML5是互聯網的下一代標准，是構建以及呈現互聯網內容的一種語言方式．被認為是互聯網的核心技術之一。HTML產生於1990年，1997年HTML4成為互聯網標准，並廣泛應用於互聯網應用的開發。
數據存儲
HTML5較之傳統的數據存儲有自已的存儲方式，允許在客戶端實現較大規模的數據存儲。為了滿足不同的需求，HTML5支持DOM Storage和Web SQL Database兩種存儲機制。其中，DOM Storage適用於具有key/value對的基本本地存儲；而WebSQLDatabase是適用於關系型資料庫的存儲方式，開發者可以使用SQL語法對這些數據進行查詢、插入等操作。
⑶ 為什麼HTML5會放棄Web SQL Database
因為沒大公司支持，或許他們覺得HTML不需要資料庫，又或者他們覺得前端不需要傳統的SQL資料庫。
⑷ html5能幹什麼
HTML5是構建Web內容的一種語言描述方式。HTML5是互聯網的下一代標准，是構建以及呈現互聯網內容的一種語言方式．被認為是互聯網的核心技術之一。HTML產生於1990年，1997年HTML4成為互聯網標准，並廣泛應用於互聯網應用的開發。
HTML5是Web中核心語言HTML的規范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息。HTML5在從前HTML4.01的基礎上進行了一定的改進，雖然技術人員在開發過程中可能不會將這些新技術投入應用，但是對於該種技術的新特性，網站開發技術人員是必須要有所了解的。
(4)html5sqldatabase擴展閱讀：
新一代網路標准能夠讓程序通過Web瀏覽器，消費者從而能夠從包括個人電腦、筆記本電腦、智能手機或平板電腦在內的任意終端訪問相同的程序和基於雲端的信息。HTML5允許程序通過Web瀏覽器運行，並且將視頻等目前需要插件和其它平台才能使用的多媒體內容也納入其中，這將使瀏覽器成為一種通用的平台，用戶通過瀏覽器就能完成任務。此外，消費者還可以訪問以遠程方式存儲在「雲」中的各種內容，不受位置和設備的限制。
⑸ html5本地存儲更新資料庫sql 怎麼寫
HTML5本地存儲——Web SQL Database
在HTML5 WebStorage介紹了html5本地存儲的Local Storage和Session Storage，這兩個是以鍵值對存儲的解決方案，存儲少量數據結構很有用，但是對於大量結構化數據就無能為力了，靈活大不夠強大。
Web SQL Database
我們經常在資料庫中處理大量結構化數據，html5引入Web SQL Database概念，它使用 SQL 來操縱客戶端資料庫的 API，這些 API 是非同步的，規范中使用的方言是SQLlite，悲劇正是產生於此，Web SQL Database規范頁面有著這樣的聲明
This document was on the W3C Recommendation track but specification work has stopped. The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.
大概意思就是
這個文檔曾經在W3C推薦規范上，但規范工作已經停止了。目前已經陷入了一個僵局：目前的所有實現都是基於同一個SQL後端（SQLite），但是我們需要更多的獨立實現來完成標准化。
也就是說這是一個廢棄的標准了，雖然部分瀏覽器已經實現，但。。。。。。。
三個核心方法
但是我們學一下也沒什麼壞處，而且能和現在W3C力推的IndexedDB做比較，看看為什麼要廢棄這種方案。Web SQL Database 規范中定義的三個核心方法：
openDatabase：這個方法使用現有資料庫或新建資料庫來創建資料庫對象
transaction：這個方法允許我們根據情況控制事務提交或回滾
executeSql：這個方法用於執行SQL 查詢
openDatabase
我們可以使用這樣簡單的一條語句，創建或打開一個本地的資料庫對象
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
openDatabase接收五個參數：
資料庫名字
資料庫版本號
顯示名字
資料庫保存數據的大小（以位元組為單位 )
回調函數（非必須)
如果提供了回調函數，回調函數用以調用 changeVersion() 函數，不管給定什麼樣的版本號，回調函數將把資料庫的版本號設置為空。如果沒有提供回調函數，則以給定的版本號創建資料庫。
transaction
transaction方法用以處理事務，當一條語句執行失敗的時候，整個事務回滾。方法有三個參數
包含事務內容的一個方法
執行成功回調函數（可選）
執行失敗回調函數（可選）
db.transaction(function (context) {
context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
});
這個例子中我們創建了一個table，並在表中插入三條數據，四條執行語句任何一條出現錯誤，整個事務都會回滾
executeSql
executeSql方法用以執行SQL語句，返回結果，方法有四個參數
查詢字元串
用以替換查詢字元串中問號的參數
執行成功回調函數（可選）
執行失敗回調函數（可選）
在上面的例子中我們使用了插入語句，看個查詢的例子
db.transaction(function (context) {
context.executeSql('SELECT * FROM testTable', [], function (context, results) {
var len = results.rows.length, i;
console.log('Got '+len+' rows.');
for (i = 0; i < len; i++){
console.log('id: '+results.rows.item(i).id);
console.log('name: '+results.rows.item(i).name);
}
});
完整示例
<!DOCTYPE HTML>
<html>
<head>
<title>Web SQL Database</title>
</head>
<body>
<script type="text/javascript">
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (context) {
context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
});
db.transaction(function (context) {
context.executeSql('SELECT * FROM testTable', [], function (context, results) {
var len = results.rows.length, i;
console.log('Got '+len+' rows.');
for (i = 0; i < len; i++){
console.log('id: '+results.rows.item(i).id);
console.log('name: '+results.rows.item(i).name);
}
});
});
</script>
</body>
</html>
最後
由於Web SQL Database規范已經被廢棄，原因說的很清楚，當前的SQL規范採用SQLite的SQL方言，而作為一個標准，這是不可接受的，每個瀏覽器都有自己的實現這還搞毛的標准。這樣瀏覽器兼容性就不重要了，估計慢慢會被遺忘。不過Chrome的控制台真心好用啊，神馬cookie、Local Storage、Session Storage、Web SQL、IndexedDB、Application Cache等html5新增內容看的一清二楚，免去了很多調試代碼工作。
⑹ html5,什麼是本地存儲什麼是websql資料庫存儲
HTML5 ：
將成為HTML、XHTML以及HTMLDOM的新標准。
HTML的上一個版本誕生於1999年。自從那以後，Web世界已經經歷了巨變。
HTML5仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些HTML5支持。
本地存儲：
儲存在用戶本地終端上的數據，多數使用cookie
Cookie技術誕生以來，它就成了廣大網路用戶和Web開發人員爭論的一個焦點。有一些網路用戶，甚至包括一些資深的Web專家也對它的產生和推廣感到不滿，這並不是因為Cookie技術的功能太弱或其他技術性能上的原因，而是因為Cookie的使用對網路用戶的隱私構成了危害。因為Cookie是由Web伺服器保存在用戶瀏覽器上的小文本文件，它包含有關用戶的信息[2]。
websql資料庫存儲：
使用資料庫進行數據存儲，現在流行的資料庫有：
1、Access一般用在小網站上，類似企業站，功能比較簡單，對數據要求不高；
2、Mssql是一個比較大的完善的資料庫，在windows上常用,配NETASP等程序。
3、Mysql是一個小型的公開源代碼的免費資料庫，在windows，linux上都常用，和PHP程序組成一對完美搭檔。
⑺ HTML5 Web SQL 資料庫怎樣實現多表查詢
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');
});
}
⑻ HTML5WebSQLDatabase與localStorage用途
localStorage.setTime()是把值存在本地，可以實現頁面之間傳值
localStorage.getTime()把值從本地取出來
WebSQLDatabase是存一個數據表在本地，連上網以後再發送到資料庫！
⑼ 怎樣使用HTML5中的Web SQL DataBase本地資料庫增刪改查
首先來看看怎樣創建資料庫：
1、創建資料庫
var db = window.openDatabase("mydata", "1.0","資料庫描述",20000);
//window.openDatabase("資料庫名字", "版本","資料庫描述",資料庫大小);
if(db)
alert("新建資料庫成功！");
2、怎樣連接資料庫
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE test (id int UNIQUE, mytitle TEXT, timestamp REAL)");
});
上面是新建數據表！本地資料庫是通過db.transaction()函數來實現的，再看下面的代碼吧！
插入記錄：
db.transaction(function(tx) {
tx.executeSql("INSERT INTO test (mytitle, timestamp) values(?, ?)", ["WEB Database", new Date().getTime()], null, null);
});
更新記錄：
db.transaction(function(tx) {
tx.executeSql("update test set mytitle=? where mytitle = 'fsafdsaf'",['xp'],null,null);
});
查詢記錄：
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [],
function(tx, result) {
for(var i = 0; i < result.rows.length; i++){
document.write('<b>' + result.rows.item(i)['mytitle'] + '</b><br />');
}
}, function(){
alert("error");
});
});
刪除表：
db.transaction(function(tx) {
tx.executeSql("DROP TABLE test");
})