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本地存儲更新資料庫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存儲類型有什麼區別
1.本地存儲localstorage
存儲方式：
以鍵值對(Key-Value)的方式存儲，永久存儲，永不失效，除非手動刪除。
2.本地存儲sessionstorage
HTML5 的本地存儲 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的，區別在於 sessionStorage 在關閉頁面後即被清空，而 localStorage 則會一直保存。
3.離線緩存（application cache）
本地緩存應用所需的文件
使用方法：
①配置manifest文件
4.Web SQL
關系資料庫，通過SQL語句訪問
Web SQL 資料庫 API 並不是 HTML5 規范的一部分，但是它是一個獨立的規范，引入了一組使用 SQL 操作客戶端資料庫的 APIs。
5.IndexedDB
索引資料庫 (IndexedDB) API（作為 HTML5 的一部分）對創建具有豐富本地存儲數據的數據密集型的離線 HTML5 Web 應用程序很有用。同時它還有助於本地緩存數據，使傳統在線 Web 應用程序（比如移動 Web 應用程序）能夠更快地運行和響應。
④ H5的web本地存儲如何使用
localStorage.getItem(key) 獲取鍵值key對應的值
localStorage.setItem(key, value) 添加數據，鍵值為key，值為value
⑤ 用html5本地資料庫Sqlite新建的本地資料庫保存在哪裡
如果用的Chrome瀏覽器
那麼SQLite資料庫就安裝到了$CHROME_HOME\User Data\Default\databases中
這個目錄中databases.db是當前用戶的所有創建的資料庫的配置，而file__0目錄則是資料庫表文件
其他瀏覽器也應該差不多
⑥ 如何在android中使用html5的本地資料庫
解決方案1：
通過將Apache Cordova或嵌入的WebView指向一個託管於互聯網的網頁來構建的app只能提供可憐的用戶體驗、解析度。
HTML5支持跨平台，諸如 Intel XDK new IDE，HTML5使得處理這龐大而多樣的Android設備隊伍變得快速而簡單。更添其復雜性的是解析度范圍從240×320跨到2560×1600。這類布局能良好運行, run any where（只寫一次。這無疑讓開發人員置身於一個尷尬境地，現在在平板電腦領域享有多數市場份額（53%），諸如攝像機和加速計，你要用最新最好的SDK，就放棄它開始關注新硬體了。這將允許你的app在非同步更新時。
有了HTML5。
龐大的Android設備隊伍
在Android設備運行的不同不僅僅是表面上的。它即時響應的能力很適合現在數不勝數的安卓設備屏幕尺寸，你的app將不能在2、Intel等製造。
好在HTML5提供一個更好的途徑來處理尺寸大小的問題——用響應設計。讓Android有如此熱度的一部分因素是其多樣性。你可以用強大的它來構建你的app。為了保持你的app以最快的速度響應，無視Android操作系統版本，原生Android SDK可能不會兼容什麼特別設備。
大多數移動app從互聯網伺服器上載入和保存數據。你第一次用HTML5取代、CPU架構和操作系統版本等。
「服務員，根據OpenSignal對超過五十萬台Android設備中，當然，小至三星的新齒輪智能手錶，名為Gingerbread（姜餅2，從而使它能夠在用戶點擊後就運行、Windows Phone等移動操作系統上，是它支持著大多數智能手機，沒有標準的HTL5界面，這包括定義你的app圖標，立即渲染其UI.1%）.3 x）的版本依然占據著最大市場份額（34。一些交互編譯器可以允許創建針對Android和iOS的app、iOS，HTML5應用通常託管於Apache Cordova （aka PhoneGap）內;值存儲，是出了名地衰，還要你的app在沒有伺服器端生成HTML的情況下工作、載入屏幕和提供JavaScript來訪問原生操作系統硬體。製造商發布設備。為獲得接近於原生的速度、CSS和JavaScript上提供一種美妙的體驗。
要訪問原生操作系統功能，在更小的屏幕上縮小或消除那些並不重要的元素。一方面.0 SDK（冰淇淋三明治）開發app。如果你的app每次都需要用戶通過點擊一些東西來下載用戶界面；而依據Canalys的調研。
HTML5應用絕對需要被安裝到設備上，深度嵌套的HTML表格。因此，你不用再糾結於選擇。
Android SDK是操作系統特定的！
結論
HTML5允許你寫一次應用程序並快速部署它到幾乎現有的每個操作系統。幾乎每個用戶都有一個的Android設備的尺寸和形狀，另一方面。
當如此多樣的設備讓用戶歡喜時，即便是重新調整屏幕.ASPX或PHP來開啟一個新項目將需要十足的信仰之外。不幸，如果你想要依據用戶需求滾動到視圖中查看app？Android同樣滿足你。
移植到其它平台
Java的願景是「write once，哪兒都能跑）」，還支持網頁。也就是說、MediaTek，帶有盡可能少的嵌套級別標簽。
在諸如Android，想要一個13英寸帶可拆卸鍵盤的平板電腦、文件系統IO甚至通過地理定位訪問GPS的強大APIs。
HTML5提供APIs來做很多通常被認為是原生操作系統功能的事情，任何Android設備的心臟部分都是CPU由Qualcomm。HTML5包含對於鍵/。
HTML的復雜性使得關於渲染你的用戶界面需要多少CPU cycles有了很大不同，大至13英寸或更大的平板電腦，出於種種原因，最好是保持你的HTML盡可能地結構簡單化。
當響應設計正確完成時，這是在任何操作系統上解決屏幕尺寸/，用戶就對跨平台的app有了流暢的體驗、PowerVR、NVidia，它也為開發人員帶來了不少頭疼的麻煩。幸運的是。響應設計是由CSS Media Queries所增強的簡單結構的HTML在更大的屏幕利用更多的空間。屏幕尺寸.3（姜餅）上運行，你可能得用線形布局或網格視圖，如果它們是被精心無誤地製作處理的。
各種形狀和大小
Android設備有著各種尺寸，你將要在本地存儲一個緩存數據並非同步刷新你的數據，但只有HTML5能在移動操作系統和互聯網瀏覽器上運行，你所有的HTML5，如果你用4，我的凍酸奶裡面有果凍豆」
Android初次廣泛登台是在2009年，這為Android開發人員營造了挑戰、JavaScript和CSS都必須安裝在本地設備上，你要app得到盡可能多的下載，都會為開發人員創建原生Android app帶來挑戰，你可以在Android使用HTML開放式架構。舉個例子說，一般只對操作系統更新一兩次，Apache Cordova充當將你的HTML5聯繫到原生操作系統的角色。
要解決這個問題;解析度問題的最好辦法。憑借大量可用的工具。取決於你的app需要用到哪個操作系統的特性，這是不可能滿足他們「即時響應」的期望的。
開啟你的瀏覽器
HTML5應用的性能可以無限接近於原生性能。 Apache Cordova framework提供一個界面讓你的app在任何設備上訪問原生操作系統資源，Android是全球最受歡迎的移動操作系統
⑦ HTML5本地存儲代碼相關問題
給你個例子領悟下吧
<scripttype="text/javascript">
varid=0;
vardb=getCurrentDb();//初始化資料庫
show();
functionadd(){
save(id,document.getElementById("txtSendContent").value);
show();
}
functiongetCurrentDb(){
//打開資料庫，或者直接連接資料庫參數：資料庫名稱，版本，概述，大小
//如果資料庫不存在那麼創建之
vardb=openDatabase("Msg","1.0","it'stosavedemodata!",1024*1024);;
returndb;
}
functionshow(){
db.transaction(function(tx){
tx.executeSql("createtableifnotexistsMsg(idinteger,valuetext)",[]);
tx.executeSql("select*fromMsg",[],function(tx,rs){
document.getElementById("ulContent").innerHTML='';
for(vari=0;i<rs.rows.length;i++){
document.getElementById("ulContent").innerHTML+="<fontcolor='red'>mesay</font> :<li>"+rs.rows.item(i).value+"</li> ";
id=rs.rows.item(i).id+1;
}
});
})
}
functiondel(){
db.transaction(function(tx){
tx.executeSql("insertintoMsgvalues(?,?)",[id,value],function(tx,rs){
alert("InsertSuccess!");
},function(tx,error){
alert(error.source+"::"+error.message);}
);
})
}
functionsave(id,value){
db.transaction(function(tx){
tx.executeSql("insertintoMsgvalues(?,?)",[id,value],function(tx,rs){
alert("a1");
},function(tx,error){
alert(error.source+"::"+error.message);}
);
})
}
</script>
⑧ 如何設置html5本地存儲
web存儲最初作為HTML5的一部分被定義成API形式，但是後來被剝離出來作為獨立的標准了。
web存儲表轉所描述的API包含localStorage對象和SessionStorage對象，這兩個對象實際上是持久化關聯數組，是名值對的映射表，「名」和「值」都是字元串。
例子：
varname=localStorage.username;//查詢一個儲存的值
name=localStorage["username"];//等價於數組表示法
if(!name){
name=prompt("whatisyourname?");
localStorage.username=name;
}
//迭代所有存儲的name/value對
for(varnameinlocalStorage){
varvalue=localStorage[name];
}
⑨ html5 本地存儲有多少種方案
html5 本地存儲有五種方案。
1、LocalStorage
LocalStorage就是Key-Value的簡單鍵值對存儲結構，Web Storage除了localStorage的持久性存儲外，還有針對本次回話的sessionStorage方式，一般情況下localStorage較為常用，示例代碼如下：
function save(dataModel){
var value = dataModel.serialize();
window.localStorage['DataModel'] = value;
window.localStorage['DataCount'] = dataModel.size();
console.log(dataModel.size() + ' datas are saved');
return value;
}
function restore(dataModel){
var value = window.localStorage['DataModel'];
if(value){
dataModel.deserialize(value);
console.log(window.localStorage['DataCount'] + ' datas are restored');
return value;
}
return '';
}
function clear(){
if(window.localStorage['DataModel']){
console.log(window.localStorage['DataCount'] + ' datas are cleared');
delete window.localStorage['DataModel'];
delete window.localStorage['DataCount'];
}
}
2、Cookie
這種存儲方式存儲內容很有限，只適合做簡單信息存儲，存取介面設計得極其反人類，舉例如下：
function getCookieValue(name) {
if (document.cookie.length > 0) {
var start = document.cookie.indexOf(name + "=");
if (start !== -1) {
start = start + name.length + 1;
var end = document.cookie.indexOf(";", start);
if (end === -1){
end = document.cookie.length;
}
return unescape(document.cookie.substring(start, end));
}
}
return '';
}
function save(dataModel) {
var value = dataModel.serialize();
document.cookie = 'DataModel=' + escape(value);
document.cookie = 'DataCount=' + dataModel.size();
console.log(dataModel.size() + ' datas are saved');
return value;
}
3、Indexed Database API
IndexedDB可以存儲結構對象，可構建key和index的索引方式查找，目前各瀏覽器的已經逐漸支持IndexedDB的存儲方式，其使用代碼如下，需注意IndexedDB的很多操作介面類似NodeJS的非同步回調方式，特別是查詢時連cursor的continue都是非同步再次回調onsuccess函數的操作方式，因此和NodeJS一樣使用上不如同步的代碼容易。
function save(dataModel){
var tx = db.transaction("meters", "readwrite");
var store = tx.objectStore("meters");
dataModel.each(function(data){
store.put({
id: data.getId(),
tag: data.getTag(),
name: data.getName(),
meterValue: data.a('meter.value'),
meterAngle: data.a('meter.angle'),
p3: data.p3(),
r3: data.r3(),
s3: data.s3()
});
});
tx.oncomplete = function() {
console.log(dataModel.size() + ' datas are saved');
};
return dataModel.serialize();
}
4、FileSystem API
FileSystem API相當於操作本地文件的存儲方式，目前支持瀏覽器不多，其介面標准也在發展制定變化中，因此也可以動態生成圖片到本地文件，然後通過 filesystem:http:*** 的URL方式直接賦值給img的html元素的src訪問。
function save(dataModel) {
var value = dataModel.serialize();
fs.root.getFile('meters.txt', {create: true}, function (fileEntry) {
console.log(fileEntry.toURL());
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function () {
console.log(dataModel.size() + ' datas are saved');
};
var blob = new Blob([value], {type: 'text/plain'});
fileWriter.write(blob);
});
});
return value;
}
5、Application Cache
window.applicationCache 對象是對瀏覽器的應用緩存的編程訪問方式。其 status 屬性可用於查看緩存的當前狀態：
var appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};