HTML5 中的 Web SQL Database 来构建应用程序

最新推荐文章于 2024-05-07 12:27:36 发布

爱吃鱼油

最新推荐文章于 2024-05-07 12:27:36 发布

阅读量604

点赞数

分类专栏： html5

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

转自： http://www.ibm.com/developerworks/cn/web/1108_zhaifeng_websqldb/

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
	tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
	msg = '<p>Log message created and row inserted.</p>';
	document.querySelector('#status').innerHTML =   msg;
});

db.transaction(function (tx) {
	tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
	var len = results.rows.length, i;
	msg = "<p>Found rows: " + len + "</p>";
	document.querySelector('#status').innerHTML +=   msg;
	for (i = 0; i < len; i++){
	msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
	document.querySelector('#status').innerHTML +=   msg;
	}
}, null);
});
</script>
</head>
<body>
<div id="status" name="status">Status Message</div>
</body>
</html>

用谷歌查看控制台：Resources 点击 WebSQL 可以查看到创建表和插入的数据,查询出的数据直接显示在页面。