前言：在HTML5 WebStorage介紹了html5本地存儲(chǔ)的Local Storage和Session Storage，這兩個(gè)是以鍵值對(duì)（字符串）存儲(chǔ)的解決方案，存儲(chǔ)少量數(shù)據(jù)結(jié)構(gòu)很有用，但是對(duì)于大量結(jié)構(gòu)化數(shù)據(jù)就無(wú)能為力了，靈活大不夠強(qiáng)大。
** Web SQL Database** 我們經(jīng)常在數(shù)據(jù)庫(kù)中處理大量結(jié)構(gòu)化數(shù)據(jù)，html5引入Web SQL Database概念，它使用 SQL 來(lái)操縱客戶端數(shù)據(jù)庫(kù)的 API，這些 API 是異步的，規(guī)范中使用的是SQLlite（SQL后端）。
ps:附上gihub項(xiàng)目連接
它包含三個(gè)核心方法：
1、openDatabase：這個(gè)方法使用現(xiàn)有數(shù)據(jù)庫(kù)或創(chuàng)建新數(shù)據(jù)庫(kù)創(chuàng)建數(shù)據(jù)庫(kù)對(duì)象。
2、transaction：這個(gè)方法允許我們根據(jù)情況控制事務(wù)提交或回滾。
3、executeSql：這個(gè)方法用于執(zhí)行真實(shí)的SQL查詢。
兼容性：一些主流瀏覽器還是可以的。如下圖：
一、基礎(chǔ)操作
1. 新建（打開(kāi)）數(shù)據(jù)庫(kù)
openDatabase方法可以打開(kāi)已經(jīng)存在的數(shù)據(jù)庫(kù)，不存在則創(chuàng)建：
vardataBase = window.openDatabase(dbname, version, dbdesc, dbsize,function() {});
openDatabasek中五個(gè)參數(shù)分別為：數(shù)據(jù)庫(kù)名、版本號(hào)、描述、數(shù)據(jù)庫(kù)大小、創(chuàng)建回調(diào)。創(chuàng)建回調(diào)沒(méi)有也可以創(chuàng)建數(shù)據(jù)庫(kù)。
Ex：
var dataBase = window.openDatabase('websql', '1.0', 'Datura練習(xí)', 4*1024*1024,function() {});
2. 建表
用到transaction方法用以處理事務(wù)，當(dāng)一條語(yǔ)句執(zhí)行失敗的時(shí)候，整個(gè)事務(wù)回滾。方法有三個(gè)參數(shù)
a). 包含事務(wù)內(nèi)容的一個(gè)方法;
b). 執(zhí)行成功回調(diào)函數(shù)（可選）;
c). 執(zhí)行失敗回調(diào)函數(shù)（可選）;
Ex：
var tableName = 'websqlTable';//創(chuàng)建表的名稱
//這里定一個(gè)變量來(lái)存建表相關(guān)信息，并聲明主鍵，需要存儲(chǔ)的字段及格式（NAME、AGE、HEIGHT、WEIGHT）
var creatTableSQL = 'CREATE TABLE IF NOT EXISTS '+ tableName + ' (rowid INTEGER PRIMARY KEY AUTOINCREMENT, NAME text,AGE text,HEIGHT text,WEIGTH text)';
dataBase.transaction(function (ctx,result) {
ctx.executeSql(creatTableSQL,[],function(ctx,result){
alert("表創(chuàng)建成功 " + tableName);//建表成功
},function(tx, error){
alert('創(chuàng)建表失敗:' + tableName + error.message);//建表失敗
});
});
3. 向指定表中插入數(shù)據(jù)
同樣用到transaction方法用以處理事務(wù)。
function websqlInsterDataToTable(tableName,NAME,AGE,HEIGHT,WEIGTH){
var insterTableSQL = 'INSERT INTO ' + tableName + ' (NAME,AGE,HEIGHT,WEIGTH) VALUES (?,?,?,?)';
dataBase.transaction(function (ctx) {
ctx.executeSql(insterTableSQL,[NAME,AGE,HEIGHT,WEIGTH],function (ctx,result){
console.log("插入" + tableName + NAME + "成功");
},
function (tx, error) {
alert('插入失敗: ' + error.message);
});
});
}
websqlInsterDataToTable(websqlTable,"小紅","18","175cm","40kg");
websqlInsterDataToTable(websqlTable,"小黃","17","180cm","45kg");
websqlInsterDataToTable(websqlTable,"小藍(lán)","19","185cm","70kg");
websqlInsterDataToTable(websqlTable,"小綠","19","175cm","60kg");
websqlInsterDataToTable(websqlTable,"小青","21","162cm","52kg");
websqlInsterDataToTable(websqlTable,"小紫","25","195cm","80kg");
4. 指定表中查找所有數(shù)據(jù)或查找某條數(shù)據(jù)
同樣用到transaction方法用以處理事務(wù)。
a). 查找所有數(shù)據(jù)
function websqlGetAllData(tableName){
var selectALLSQL = 'SELECT * FROM ' + tableName;
dataBase.transaction(function (ctx) {
ctx.executeSql(selectALLSQL,[],function (ctx,result){
alert('查詢成功: ' + tableName + result.rows.length);
var len = result.rows.length;
for(var i = 0;i < len;i++) {
console.log("NAME = " + result.rows.item(i).NAME);
console.log("AGE = " + result.rows.item(i).AGE);
console.log("HEIGHT = " + result.rows.item(i).HEIGHT);
console.log("WEIGTH = " + result.rows.item(i).WEIGTH);
console.log("-------- 我是分割線 -------");
}
},
function (tx, error) {
alert('查詢失敗: ' + error.message);
});
});
}
websqlGetAllData(websqlTable);
b). 查找某條數(shù)據(jù)
function websqlGetAData(tableName,name){
var selectSQL = 'SELECT * FROM ' + tableName + ' WHERE NAME = ?'
dataBase.transaction(function (ctx) {
ctx.executeSql(selectSQL,[name],function (ctx,result){
alert('查詢成功: ' + tableName + result.rows.length);
var len = result.rows.length;
for(var i = 0;i < len;i++) {
console.log("NAME = " + result.rows.item(i).NAME);
console.log("AGE = " + result.rows.item(i).AGE);
console.log("HEIGHT = " + result.rows.item(i).HEIGHT);
console.log("WEIGTH = " + result.rows.item(i).WEIGTH);
}
},
function (tx, error) {
alert('查詢失敗: ' + error.message);
});
});
}
websqlGetAData(websqlTable,"小紫");
5. 刪除數(shù)據(jù)
a). 刪除表里的全部數(shù)據(jù)
function websqlDeleteAllDataFromTable(tableName){
var deleteTableSQL = 'DELETE FROM ' + tableName;
localStorage.removeItem(tableName);
dataBase.transaction(function (ctx,result) {
ctx.executeSql(deleteTableSQL,[],function(ctx,result){
alert("刪除表成功 " + tableName);
},function(tx, error){
alert('刪除表失敗:' + tableName + error.message);
});
});
}
websqlDeleteAllDataFromTable(websqlTable);
b). 刪除表里的一條數(shù)據(jù)
function websqlDeleteADataFromTable(tableName,name){
var deleteDataSQL = 'DELETE FROM ' + tableName + ' WHERE NAME = ?';
localStorage.removeItem(tableName);
dataBase.transaction(function (ctx,result) {
ctx.executeSql(deleteDataSQL,[name],function(ctx,result){
alert("刪除成功 " + tableName + name);
},function(tx, error){
alert('刪除失敗:' + tableName + name + error.message);
});
});
}
websqlDeleteADataFromTable(websqlTable,"小藍(lán)");
6. 修改某條數(shù)據(jù)
function websqlUpdateAData(tableName,name,age){
var updateDataSQL = 'UPDATE ' + tableName + ' SET AGE = ? WHERE NAME = ?';
dataBase.transaction(function (ctx,result) {
ctx.executeSql(updateDataSQL,[age,name],function(ctx,result){
alert("更新成功 " + tableName + name);
},function(tx, error){
alert('更新失敗:' + tableName + name + error.message);
});
});
}
websqlUpdateAData(websqlTable,"小紅","1000")
在chrome瀏覽器中的展示如下圖：
