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新增內容看的一清二楚，免去了很多調試代碼工作。
B. html5是什麼干什麼的
就主要而言，HTML是一種標記語言，是網頁的規范編程語言
1.主要適用於面向Web編程
【例如】Wechat公眾號的部分HTML5小游戲，Web端的網頁包括網路/谷歌都是使用HTML的
【圖片例子】Google搜索界面和Bai圖片界面
【特點】一個網頁可以包含圖像，圖形，視頻，音頻，文字，動畫等不同的多媒體信息，網頁主要適用HTTP/FTP協議，遍布各個范疇，任何一個編程語言都必須被轉化為純HTML格式才可以被讀取，因此其在互聯網上是很高的地位。
C. 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前端入門資料，一起學習，一起成長！
D. 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連資料庫
E. html5 可以打開本地資料庫嗎
不可以
資料庫一般裝在服務端，需要服務端語言，如php，asp等進行操作
再說html連接本地資料庫也沒什麼用啊
F. 用html5本地資料庫Sqlite新建的本地資料庫保存在哪裡
如果用的Chrome瀏覽器
那麼SQLite資料庫就安裝到了$CHROME_HOME\User Data\Default\databases中
這個目錄中databases.db是當前用戶的所有創建的資料庫的配置，而file__0目錄則是資料庫表文件
其他瀏覽器也應該差不多
G. 怎樣使用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");
})