websql使用实例

 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>