html中使用sql数据库,Web Sql数据库的使用详解|HTML5

HTML5中的Web Sql数据库在实际应用中并不是很多，本人只看到w3schools这种教学网才用到websql，目前也只有Webkit(Safari，SafariMobile和Chrome)和Opera 10.50这些浏览器支持Web Sql数据库。

Web Sql Database无疑是一个浏览器数据库，它的规范是SQLite数据库，使用javascript来调用数据库语句，所有的语法和mysql是几乎一样的，所以学习Web Sql数据库知识是一件非常简单的事情。

Web Sql数据库有3个核心方法，分别如下，很是简单。

openDatabase  //打开数据库

transaction       //开启事务

executeSql       //执行sql语句

下面我们来创建一个名为“mydb”的数据库，然后插入一张user表，并且插入4条用户数据，javascript代码如下。

/**

* 参数一：数据库名

* 参数二：版本

* 参数三：数据库描述，没啥用

* 参数四：数据库大小

*/

var database = openDatabase('mydb','1.0','太平洋学习网数据库',2*1024*1024);

database.transaction(function (db) {

db.executeSql("CREATE TABLE IF NOT EXISTS user(id unique,username,password)");

db.executeSql("insert into user(id,username,password) values('1','张三','123456')");

db.executeSql("insert into user(id,username,password) values('2','李四','456789')");

db.executeSql("insert into user(id,username,password) values('3','王五','111111')");

db.executeSql("insert into user(id,username,password) values('4','赵六','222222')");

})

插入完user用户数据之后，我们可以在Chrome谷歌浏览器上右键---检查---Application选项，然后就可以看到我们刚刚新建的mydb数据库与user用户表数据了，如图所示。

当然了，插入数据的时候，也可以使用类似于PreparedStatement预处理的形式来插入用户数据，用问号“?”来替代插入数据，这样会比较安全一点，代码如下。database.transaction(function (db) {

db.executeSql("insert into user(id,username,password) values(?,?,?)",[4,"赵六","222222"]);

})

最后我们可以将插入的用户数据遍历出来，当然了，代码仍然是写在js的标签之间，代码如下。database.transaction(function (db) {

db.executeSql('select * from user',[],function (tx,result) {

//获取数据长度

var length = result.rows.length;

//遍历

for (var i = 0; i 

var id = result.rows.item(i).id;

var username = result.rows.item(i).username;

var password = result.rows.item(i).password

//输出用户数据

console.log(id+"==="+username+"==="+password);

}

});

})

上面的运行结果如图所示。

注：web sql数据库的语法和其他所有的数据库是一样的，唯一的区别只是web sql数据库是浏览器数据库，用javascript来调用而已，Web SQL数据库API实际上并不是HTML5规范的一部分。

来源网站：太平洋学习网，转载请注明出处：http://www.tpyyes.com/a/html5/410.html