1.html5以来，数据的前端存储已经有了很大进步。这里简单些一下webSQL的基本用法。代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>web sql</title> 6 </head> 7 <body> 8 9 <script> 10 var db = window.openDatabase("myData","1.0","我的数据库","20000"); //参数分别是，数据库名，版本号，描述信息，大小 11 if(db){ 12 alert("数据库已经创建") 13 } 14 db.transaction(function(tx){ 15 tx.executeSql("create TABLE test(id int unique,age int)") 16 }); 17 18 //插入 19 db.transaction(function(tx){ 20 tx.executeSql("insert into test(id,age) values(?,?)",["HTML5",20]) 21 }); 22 db.transaction(function(tx){ 23 tx.executeSql("insert into test(id,age) values(?,?)",["javascript",18]) 24 }); 25 //查询 26 db.transaction(function(tx){ 27 tx.executeSql("select * from test",[],function(tx,rs){ 28 for(var i = 0;i<rs.rows.length;i++){ 29 document.write("第"+(i+1)+"个数据：" +rs.rows.item(i)["id"]+"<br><br>"); 30 //取到的数据是item，中括号字段表示取那个字段的数据。 31 } 32 },function(err){ 33 console.log("Err",err) 34 }) 35 }); 36 37 38 //删除 39 db.transaction(function(tx) { 40 tx.executeSql("delete from test where id=?", ["HTML5"], function(tx, result) { 41 document.write("删除了id = "+"HTML5"+" 的数据"+"<br><br>"); 42 }, function(tx, error) { 43 log("错误：" + error.Message); 44 }); 45 }) 46 47 48 //再次查询 49 db.transaction(function(tx){ 50 tx.executeSql("select * from test",[],function(tx,rs){ 51 for(var i = 0;i<rs.rows.length;i++){ 52 document.write("第"+(i+1)+"个数据：" +rs.rows.item(i)["id"]+"<br><br>"); 53 //取到的数据是item，中括号字段表示取那个字段的数据。 54 } 55 },function(err){ 56 console.log("Err",err) 57 }) 58 }); 59 </script> 60 </body> 61 </html>