上一节讲述了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>