1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>websql应用</title> 6 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> 7 </head> 8 <body> 9 <input type="text" id="title" /> 10 <textarea name="context" id="context" cols="20" rows="8"></textarea> 11 <input type="button" value="保存" onclick="save()" /> 12 <input type="button" value="查看" onclick="chakan()" /> 13 <ol id="chakan"> 14 123 15 </ol> 16 </body> 17 <script> 18 var dbsize=2*1024*1024; 19 db=openDatabase("todo","","",dbsize); 20 db.transaction(function(tx){ 21 tx.executeSql("CREATE TABLE IF NOT EXISTS notes (id integer PRIMARY KEY,title char(50),inputMemo text,last_date datetime)"); 22 } 23 ); 24 function save(){ 25 var title=$("#title").val(); 26 var inputMemo=$("#context").val(); 27 db.transaction(function(tx){ 28 tx.executeSql("INSERT INTO notes (title,inputMemo,last_date) values(?,?,datetime('now','localtime'))",[title,inputMemo]); 29 }); 30 } 31 function chakan(){ 32 $("ol").empty(); 33 var note=""; 34 db.transaction(function(tx){ 35 tx.executeSql("SELECT id,title,inputMemo,last_date FROM notes",[],function(tx,result){ 36 if(result.rows.length>0){ 37 for (var i = 0; i <result.rows.length; i++) { 38 var item=result.rows.item(i); 39 //console.log(item["inputMemo"]); 40 note+="<li>"+"<h3>"+item["title"]+"</h3><p>"+item["inputMemo"]+"</p></li>"; 41 } 42 $("#chakan").append(note); 43 }} 44 ); 45 }); 46 } 47 </script> 48 </html>