本文資料庫操作使用的javaScript庫是html5sql.js，官網地址： http://html5sql.com/

簡介：

html5sql是一個讓HTML5 Web Database使用更方便的輕量級JavaScript模組，它的基本功能是提供在一個事務中順序執行SQL語句的結構。雖然 Web Database並沒有停止

前進的腳步，這個模組僅僅可以簡化與資料庫的互動過程。這個模組還包含有其他很多小細節以便開發人員能夠更簡單，自然便捷的工作。

操作：

文中使用到的SQlite語句：

var SQL_TABLE = 'DROP TABLE IF EXISTS taskList;CREATE TABLE taskList (id INTEGER PRIMARY KEY AUTOINCREMENT, date TEXT, title TEXT);';
var SQL_SELECT = 'SELECT * FROM taskList;';
var SQL_INSERT = 'INSERT INTO taskList(date, title) VALUES(?,?);';
var SQL_SELECT_DETAIL = 'SELECT * FROM taskList WHERE date = ?;';
var SQL_UPDATE = 'UPDATE taskList SET title = ? WHERE date = ?;';
var SQL_DELETE = 'DELETE FROM taskList WHERE date = ?;';
 

1、在執行增刪改查操作之前必須先開啟資料庫，openDatabase()的作用是開啟一個數據庫連線並返回對連線的引用。

/* 
 * name: 資料庫的名稱
 * displayname: 資料庫描述名稱
 * size: 資料庫大小
 * whenOpen: 開啟資料庫後，獲取到資料庫連線時回撥
 */
 html5sql.openDatabase('taskList', 'taskList', 5 * 1024 * 1024, function(){
   console.log('開啟資料庫成功');  
 });

2、設定資料庫版本，changeVersion()的作用是將舊版本號修改為新版本號，並執行sqlInput語句。

/*
 * oldVersion: 舊版本號
 * newVersion: 新版本號
 * sqlInput: sql語句
 * finalSuccessCallback: 成功回撥
 * failuerCallback: 失敗回撥
 */   		
 if (html5sql.database.version == "") {
    html5sql.changeVersion('', '1.0', SQL_TABLE, function(){
   	console.log('資料庫不存在，設定版本號成功');
    }, function(){
	console.log('資料庫不存在，設定版本號失敗');
    });
 }else {
    console.log('資料庫已存在，版本為：' + html5sql.database.version);
 }
 

3、增刪改查

html5sql對資料庫的增刪改查操作都由同一個方法執行，process()

1)、插入資料

var date = '2016年11月10日';
var title = '準備資金雙11買買買';
html5sql.process([{
   	            'sql': SQL_INSERT,
   		    'data': [date, title]
   		}], function(){
   		    console.log('插入資料成功');
   		    successCallback();
   		}, function(){
   		    console.log('插入資料失敗');
   		    failureCallback();
   		});

2)、查詢資料

html5sql.process([{
   		   'sql': SQL_SELECT,
   		   'data':[]
   		}], function(tx, results){
 		   console.log('查詢到' + results.rows.length + '條資料');
		   //獲取查詢結果的第一條記錄,得到的是一個物件
                   var item = results.rows.item(0);
		   //獲取物件的各個屬性
                   var date = item.date;
		   var title = item.title;
 		   successCallback(results);
   		}, function(){
   		   console.log('查詢資料失敗');
   		});

3)、修改資料

var title = '讀一本有益的書';
html5sql.process([{
   		   'sql': SQL_UPDATE,
   		   'data': [title]
   		}], function(){
   		   console.log('修改資料成功');
   		}, function(){
   		   console.log('修改資料失敗');
   		});

4)、刪除資料

var date = '2016年11月9日';
html5sql.process([{
   		   'sql': SQL_DELETE, 
   		   'data':[date]
   		}], function(){
   		   console.log('刪除資料成功');
   		}, function(){
   		   console.log('刪除資料失敗');
   		});

process(sqlInput, finalSuccessCallback, failureCallback)中的第一個引數sqlInput支援三種輸入模式，第一種為單條sql語句， 第二種為一組sql語句，第三種為一組sql語句物件。上面的例子就是第三種模式

//單條sql語句,字串的形式
var sql = 'SELECT * FROM taskList';
html5sql.process(sql, function(){
   console.log('查詢資料成功');
}, function(){
console.log('查詢資料失敗'); });

//或者sql這樣寫：
sql ="CREATE taskList (id INTEGER PRIMARY KEY AUTOINCREMENT, date TEXT, title TEXT);" +
"INSERT INTO taskList (date, title) VALUES ('2016年11月8日', '花園除草');" +
"INSERT INTO taskList (date, title) VALUES ('2016年11月9日', '書店買書');" +
"INSERT INTO taskList (date, title) VALUES ('2016年11月10日', '超市買菜');";

//一組sql語句，只是把上面的字串拆成幾個字串，裝到數組裡面
sql =["CREATE taskList (id INTEGER PRIMARY KEY AUTOINCREMENT, date TEXT, title TEXT);",
"INSERT INTO taskList (date, title) VALUES ('2016年11月8日', '花園除草');",
"INSERT INTO taskList (date, title) VALUES ('2016年11月9日', '書店買書');",
"INSERT INTO taskList (date, title) VALUES ('2016年11月10日', '超市買菜');"];
html5sql.process(sql, function(){
   console.log('查詢資料成功');
}, function(){
   console.log('查詢資料失敗');
});