十八：BOM新成就（1）--客戶端存儲數據（Web SQL DataBase實現） · JavaScript權威指南

?? 使用本地存儲和會話存儲可以實現簡單的對象持久化，可以對簡單的鍵值對或對象進行存儲。但是，對于比較復雜的關系數據進行處理時，就要用Web SQL Database.瀏覽器對Web SQL Database的支持情況如圖： ![](https://box.kancloud.cn/2016-08-30_57c54ecb60179.jpg) ## 一、如何使用Web SQL Database ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Web SQL</title> </head> <body> <script type="text/javascript"> //1、創建數據庫連接 try { var db = window.openDatabase('mydb','1.0','The First Web SQL Database','2*1024'); } catch(err) { alert(err.message?err.message:err.toString()); } //驗證連接 if(!db) { alert("不能連接數據庫"); } //2、執行SQL操作 db.transaction(callback); //3、定義事務操作的回調函數 function callback(tx) { //在事務中執行SQL操作 var sql; //創建數據庫表的結構 sql = "create table emp(firstName text,lastName text,empType text,age integer)"; tx.executeSql(sql); //插入數據庫記錄 sql = "insert into emp(firstName,lastName,empType,age) values('kang','yua','my',20)"; tx.executeSql(sql); sql = "insert into emp(firstName,lastName,empType,age) values(?,?,?,?)"; tx.executeSql(sql,['kang','yuan','myEmp',30]); //查詢數據記錄 sql = "select * from emp"; tx.executeSql(sql,[],queryResult,queryError); } //SQL操作的回調函數 function queryError(tx,err) { alert(err.message?err.message:err.toString()); } function queryResult(tx,result) { try { //獲取所有行 var rowList = result.rows; //獲取每行的記錄 for(var i = 0; i < rowList.length; i++) { var row = rowList.item(i); for(var j in row) { document.write(j+"="+row[j]+"<br/>"); } } } catch(err) { alert(err.message?err.message:err.toString()); } } </script> </body> </html> ~~~ 在google中的結果和Web SQL中的數據： ![](https://box.kancloud.cn/2016-08-30_57c54ecb815d5.jpg) ![](https://box.kancloud.cn/2016-08-30_57c54ecb95cff.jpg) ## 二、異步數據庫 ?????? 使用window.openDatabase()方法創建本地數據庫連接或者建立與已經存在的數據庫之間的連接，稱為異步執行數據庫。因為它的操作并非同步操作，而是需要很多回調函數來接收異步執行的結果。 ?????? 1、var db = window.openDatabase(name,version,displayName,estimatedSize[,creationCallback]):返回一個Database對象。 ??????????? name:定義的數據庫名，區分大小寫且唯一。 ??????????? version：創建的數據庫的版本，具有唯一性。 ??????????? displayName：數據庫的描述信息，一般用于說明數據庫的用途。 ??????????? estimatedSize：數據庫的預計大小，以byte為大小，可以更改。 ??????????? creationCallback：可選，數據庫沒有被創建時執行的回調函數。 ???? 2、執行數據庫事務：數據庫創建成功返回Database對象，可以執行數據庫操作。數據庫的操作都是事務的。 ?????????? 2.1?? db.transaction(callback[,errorCallback[,sucessCallback]]):執行事務的讀寫操作。????????? ?????????????????? callBack:定義事務操作要執行的回調函數，該函數內執行的SQL操作都是事務的，要么全部成功或要么全部失敗。該函數有一個SQLTransaction對象參數，該對象定義的方法執行SQL操作。 ??????????????????? errorCallback：定義事務操作失敗時調用的函數，該函數有一個SQLError對象的參數。 ??????????????????? sucessCallback：定義事務操作成功時調用的函數，無參數。 ?????????? 2.2? db.readTransaction(callback[,errorCallback[,sucessCallback]]):執行事務的讀操作，不可以進行寫操作。參數同2.1. ??? 3、數據庫版本管理 ????????? db.changeVersion(oldVersion,newVersion[,callback[,errorCallback[,sucessCallback]]]):用于改變數據庫的版本。后續三個可選的參數同2.1。oldVersion是當前版本號，一般設置為Database.version(該屬性返回DB的版本號)；newVersion：新版本號，為字符串類型。 ??? 4、執行SQL語句：SQLTransaction對象定義了executeSql()方法執行SQL操作。 ?????????? tx.executeSql(sql[,arg[,callback[,errorCallback]]]): ?????????? sql:執行的SQL語句 ?????????? arg：可選，定義替換參數化查詢中"?"占位符的數組，若沒有使用參數化查詢，參數可以忽略或者為空。 ?????????? callback：定義一個SQL操作成功時執行的回調函數，若不定義，可以設置為null。該回調函數有兩個參數：第一個是SQLTransaction對象，第二個是SQLResult對象，表示執行的結果。 ?????????? errorCallback：定義一個SQL操作失敗時執行的回調函數，若不定義，可以設置為null。該回調函數有兩個參數：第一個是SQLTransaction對象，第二個是SQLError對象。 ## 三、同步數據庫 ???? 同步數據庫操作僅用在worker內，不能用在網頁中，但是在worker內可以使用異步數據庫。目前僅有Chrome 6支持同步數據庫。 ???? 1、創建連接：在worker()內用WorkerGlobalScope.openDatabaseSync()方法創建本地數據庫或者建立已經存在的數據庫之間的連接。稱為同步數據庫，不需要各種回調函數來處理數據庫操作結果。 ?????????? var db = self.openDatabaseSync(name,version,displayName,estimatedSize[,creationCallback])：返回一個DatabaseSync對象，參數同openDatabase()方法。 ??? 2、執行數據庫事務：db.transaction(callback)[執行讀寫操作]和db.readTransaction(callback)[執行寫操作],callback函數的參數是一個SQLTransactionSync對象，該對象定義的方法執行SQL操作。 ~~~ //事務操作的JS代碼放在一個worker.js文件中 //在HTML中創建Worker并接收消息 if(window.Worker) { var worker = new Worker("worker.js"); .... } else { alert("不支持Worker"); } ~~~ ??? 3、數據庫版本管理： db.changeVersion(oldVersion,newVersion[,callback]):用于改變數據庫的版本。可選的參數同上。oldVersion是當前版本號，一般設置為DatabaseSync.version(該屬性返回DB的版本號)；newVersion：新版本號，為字符串類型。 ????????? 4、執行SQL語句：SQLTransactionSync對象定義了executeSql()方法執行SQL操作。 ?????????? var re=tx.executeSql(sql[,arg]):返回結果集 ?????????? sql:執行的SQL語句 ?????????? arg：可選，定義替換參數化查詢中"?"占位符的數組。若沒有使用參數化查詢，參數可以忽略或者為空。 ??????? ## 四、處理數據庫操作的結果 ?????? 成功使用executeSql()方法執行的SQL返回一個執行結果，該結果作為executeSql()的參數返回，是一個SQLResult對象。 ~~~ interface SQLResult { readonly attribute long insertId; //返回記錄行的ID readonly attribute long rowsAffected; //返回SQL語句改變的行數 readonly sttribute SQLResultRowList rows;//返回所有記錄行，沒有記錄則返回空對象 } ~~~ SQLResultRowList對象由SQLResultSetRowList接口定義 ~~~ interface SQLResultSetRowList { readoonly attribute unsigned long length; //放回記錄的行數 getter any item(in unsigned long index);//根據索引獲取指定行，索引不存在返回null } ~~~ ## 五、SQL注入 ?? 使用參數化查詢可以防止惡意SQL注入。參數化查詢指定SQL語句中使用問號(?)作為參數占位符，為數據庫訪問應用程序開發提供了一種安全、封裝性的方法，將輸入交給數據庫進行預處理。