上一節講述了localStorage,sessionStorage本地存儲，但是如何實現本地數據庫存儲呢？
這一節將講述本地存儲方式websql存儲。
websql存儲方式一共有以下幾個方法
openDatabase:這個方法使用現有的數據庫或新建數據庫來創建數據庫對象。
transaction：這個方法允許我們執行事務處理;
executeSql:這個方法用於執行sql語句;
1 var db = openDatabase(name,version,displayName,estimateSize,creationCallback);
name:數據庫的名字;
version:數據庫的版本號;
displayName:數據庫的描述;
estimateSize:數據庫保存數據的大小;
createCallback:回調函數：
2 調用transaction來執行sql語句
transaction(function(tx){})
tx:回調函數所接收的參數，此參數為transaction對象的引用。
3 調用executeSql 方法來表示處理事務
transaction.executeSql(sql,[],dataHandler,errorHandler);
sql:要執行的sql語句;
[ ]:sql語句中的占位符“？”所對應的參數。
dataHandler：執行sql語句成功時調用的回調函數：
errorHandler:執行sql語句失敗時調用的回調函數。
先貼代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webSQL</title> <script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> //初始化數據庫 function initDatabase(){ var db =getCurrentDB(); if(!db){ alert('您的瀏覽器不支持HTML本地數據庫'); return ; } db.transaction(function(trans){ trans.executeSql('create table if not exists Demo(uName text null,title text null,words text null)',[],function(trans,result){}, function(trans,message){ }); }) } //創建數據庫 function getCurrentDB(){ var db = openDatabase('data.db','1.0','demo data',1024*1024); return db; } $(function(){ //初始化數據庫 initDatabase(); $("#save").on('click',function(){ var txtName = $('#userName').val(); var txtTitle= $('#userTitle').val(); var txtWords = $('#userContent').val(); //執行sql腳本來插入數據 var db = getCurrentDB(); db.transaction(function(trans){ trans.executeSql('insert into Demo(uName,title,words)values(?,?,?)',[txtName,txtTitle,txtWords],function(ts,data){},function(ts,message){ alert(message); }) }) }) //將數據展示到表格中 $("#showContent").on('click',function(){ showAllTheData(); }); //顯示所有數據庫中的數據到頁面中 function showAllTheData(){ $('#showTable').empty(); var db =getCurrentDB(); db.transaction(function(trans){ trans.executeSql('select * from Demo',[],function(ts,data){ if(data){ //循環記錄中的數據 for(var i=0;i<data.rows.length;i++){ //獲取每一行數據的json對象（鍵值對組成),將數據拼接成表格中的一行行數據 appendDataToTable(data.rows.item(i)); } } },function(ts,message){ alert(message); }) }) } function appendDataToTable(data){ var txtName =data.uName; var txtTitle =data.title; var txtWords =data.words; var strHTML =''; strHTML+='<tr>'; strHTML += "<td>"+txtName+"</td>"; strHTML += "<td>"+txtTitle+"</td>"; strHTML += "<td>"+txtWords+"</td>"; strHTML+='</tr>'; $("#showTable").append(strHTML); } }) </script> </head> <body> <table> <tr> <td>用戶名:</td> <td><input type="text" id="userName"/></td> </tr> <tr> <td>標題:</td> <td><input type="text" id="userTitle"/></td> </tr> <tr> <td>留言:</td> <td><input type="text" id="userContent"/></td> </tr> </table> <input type="button" id="save" value="保存" /> <input type="button" id="showContent" value="展示你的信息"/> <table id ='showTable'> </table> </body> </html>