请写一个带有websql的html文件
时间: 2024-03-18 22:39:37 浏览: 11
好的,以下是一个带有websql的HTML文件示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Websql Demo</title>
<script>
// 打开数据库
var db = openDatabase('mydb', '1.0', 'My Database', 2 * 1024 * 1024);
// 创建表
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS names (id unique, name)');
});
// 插入数据
db.transaction(function(tx) {
tx.executeSql('INSERT INTO names (id, name) VALUES (?, ?)', [1, 'Alice']);
tx.executeSql('INSERT INTO names (id, name) VALUES (?, ?)', [2, 'Bob']);
});
// 从数据库中获取数据并在HTML页面中显示
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM names', [], function(tx, results) {
var len = results.rows.length;
for (var i = 0; i < len; i++) {
var id = results.rows.item(i).id;
var name = results.rows.item(i).name;
document.getElementById('names').innerHTML += '<li>' + id + ': ' + name + '</li>';
}
});
});
</script>
</head>
<body>
<h1>Names:</h1>
<ul id="names"></ul>
</body>
</html>
```
这个文件会创建一个名为“mydb”的数据库,然后在其中创建一个名为“names”的表,并向表中插入两条记录。最后,它会从数据库中获取所有记录,并在页面中以列表的形式显示出来。
请注意,在使用websql时,一定要遵循相关的API文档,确保你的代码正确无误。同时,为了避免SQL注入等安全问题,请确保你对用户输入的数据进行了适当的过滤和转义处理。