HTML5本地存储——Web SQL Database
在HTML5 WebStorage介紹了html5本地存儲的Local Storage和Session Storage，這兩個(gè)是以鍵值對存儲的解決方案，存儲少量數(shù)據(jù)結(jié)構(gòu)很有用，但是對于大量結(jié)構(gòu)化數(shù)據(jù)就無能為力了，靈活大不夠強(qiáng)大。
Web SQL Database
我們經(jīng)常在數(shù)據(jù)庫中處理大量結(jié)構(gòu)化數(shù)據(jù)，html5引入Web SQL Database概念，它使用 SQL 來操縱客戶端數(shù)據(jù)庫的 API，這些 API 是異步的，規(guī)范中使用的方言是SQLlite，悲劇正是產(chǎn)生于此，Web SQL Database規(guī)范頁面有著這樣的聲明
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.
?大概意思就是
這個(gè)文檔曾經(jīng)在W3C推薦規(guī)范上，但規(guī)范工作已經(jīng)停止了。目前已經(jīng)陷入了一個(gè)僵局：目前的所有實(shí)現(xiàn)都是基于同一個(gè)SQL后端（SQLite），但是我們需要更多的獨(dú)立實(shí)現(xiàn)來完成標(biāo)準(zhǔn)化。
也就是說這是一個(gè)廢棄的標(biāo)準(zhǔn)了，雖然部分瀏覽器已經(jīng)實(shí)現(xiàn)，但。。。。。。。
三個(gè)核心方法
但是我們學(xué)一下也沒什么壞處，而且能和現(xiàn)在W3C力推的IndexedDB做比較，看看為什么要廢棄這種方案。Web SQL Database 規(guī)范中定義的三個(gè)核心方法：
openDatabase
我們可以使用這樣簡單的一條語句，創(chuàng)建或打開一個(gè)本地的數(shù)據(jù)庫對象：
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);openDatabase接收五個(gè)參數(shù)：
如果提供了回調(diào)函數(shù)，回調(diào)函數(shù)用以調(diào)用 changeVersion() 函數(shù)，不管給定什么樣的版本號，回調(diào)函數(shù)將把數(shù)據(jù)庫的版本號設(shè)置為空。如果沒有提供回調(diào)函數(shù)，則以給定的版本號創(chuàng)建數(shù)據(jù)庫。
transaction
transaction方法用以處理事務(wù)，當(dāng)一條語句執(zhí)行失敗的時(shí)候，整個(gè)事務(wù)回滾。方法有三個(gè)參數(shù)
這個(gè)例子中我們創(chuàng)建了一個(gè)table，并在表中插入三條數(shù)據(jù)，四條執(zhí)行語句任何一條出現(xiàn)錯(cuò)誤，整個(gè)事務(wù)都會回滾
executeSql
executeSql方法用以執(zhí)行SQL語句，返回結(jié)果，方法有四個(gè)參數(shù)
在上面的例子中我們使用了插入語句，看個(gè)查詢的例子
1 db.transaction(function (context) { 2 context.executeSql('SELECT * FROM testTable', [], function (context, results) { 3 var len = results.rows.length, i; 4 console.log('Got '+len+' rows.'); 5 for (i = 0; i < len; i++){ 6 console.log('id: '+results.rows.item(i).id); 7 console.log('name: '+results.rows.item(i).name); 8 } 9 });完整示例：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Web SQL Database</title> 5 </head> 6 <body> 7 <script type="text/javascript"> 8 var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024); 9 var msg; 10 db.transaction(function (context) { 11 context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)'); 12 context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")'); 13 context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")'); 14 context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")'); 15 }); 16 17 db.transaction(function (context) { 18 context.executeSql('SELECT * FROM testTable', [], function (context, results) { 19 var len = results.rows.length, i; 20 console.log('Got '+len+' rows.'); 21 for (i = 0; i < len; i++){ 22 console.log('id: '+results.rows.item(i).id); 23 console.log('name: '+results.rows.item(i).name); 24 } 25 }); 26 }); 27 </script> 28 </body> 29 </html>最后
由于Web SQL Database規(guī)范已經(jīng)被廢棄，原因說的很清楚，當(dāng)前的SQL規(guī)范采用SQLite的SQL方言，而作為一個(gè)標(biāo)準(zhǔn)，這是不可接受的，每個(gè)瀏覽器都有自己的實(shí)現(xiàn)這還搞毛的標(biāo)準(zhǔn)。這樣瀏覽器兼容性就不重要了，估計(jì)慢慢會被遺忘。不過Chrome的控制臺真心好用啊，神馬cookie、Local Storage、Session Storage、Web SQL、IndexedDB、Application Cache等html5新增內(nèi)容看的一清二楚，免去了很多調(diào)試代碼工作。
轉(zhuǎn)載于:https://www.cnblogs.com/joyco773/p/6164942.html
總結(jié)
以上是生活随笔為你收集整理的HTML5本地存储——Web SQL Database的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 部署 DevStack - 每天5分钟玩
- 下一篇： 控件联动（三级联动）