HTML5 使用浏览器内置数据库之 Web SQL

最新推荐文章于 2024-07-19 19:56:15 发布

东成熙就

最新推荐文章于 2024-07-19 19:56:15 发布

阅读量1.3k

点赞数

分类专栏： HTML5 WebSQL 文章标签： HTML5连数据库 WebSQL 浏览器内置数据库

本文链接：https://blog.csdn.net/phpfer/article/details/49313759

版权

HTML5 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

WebSQL

1 篇文章 0 订阅

订阅专栏

要点：

1. openDatabase(数据库名,版本号,简介,存储空间大小,回调函数);

var db = openDatabase('demoDB','1.0','this is a demo',2*1024*1024,function(){console.log('create demoDB success')});

2. 事务处理。db.transaction(function(ts){});

db.transaction(function (ts) {
	ts.executeSql(
	sql,
	[],
	function (su){
			console.log('create table success');
		},
	function (er){
			console.log('create table error');
		}
	)
});

3. 执行SQL语句。ts.executeSql(sql,[],function(success){},function(error){});

ts.executeSql(
	sql,
	[],
	function (su){
		console.log('create table success');
	},
	function (er){
		console.log('create table error');
	}
)

另W3C已停止对WebSQL的更新。

全部的源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script> 
			//创建、连接数据库demoDB
			function conDB(){
				var db = openDatabase('demoDB','1.0','this is a demo',2*1024*1024,function(){console.log('create demoDB success')});
				return db;
				//alert('con');
			}
			
			//创建数据表table,包括mid,title,content字段
			function iniTable(){
				var db = conDB();
				var sql = "create table if not exists dm_message (mid unique,title text, content text)";
				db.transaction(function (ts) {
						ts.executeSql(
							sql,
							[],
							function (su){
								console.log('create table success');
							},
							function (er){
								console.log('create table error');
							}
						)
				});
			}
			iniTable();
			
			//增加数据
			function insertData(){
				var db = conDB();
				var tval = document.getElementById('tval').value;
				var cval = document.getElementById('cval').value;
				var sql = "insert into dm_message (title,content) values (?,?)";
				db.transaction(function(ts) {
						ts.executeSql(
							sql,
							[tval,cval],
							function(su) {
								alert('insert success');
							},
							function(er) {
								alert('insert error');
							}
						)
				});
			}
			
			//显示数据
			function getData(){
				var db = conDB();
				var sql = "select * from dm_message";
				db.transaction(function(ts){
					ts.executeSql(
						sql,
						[],
						function(su,rs){
							
							if (rs) {
								for (var i=0; i<rs.rows.length; i++) {
									var str="<tr><td>"+(i+1)+"</td><td>"+rs.rows.item(i).title+"</td><td>"+rs.rows.item(i).content+"</td></tr>";
									//alert(str);
									console.log(str);
									document.getElementById('rsData').innerHTML += str;
								}
							}
						},
						function(er){
							alert('getData errors')
						}
					)
				});
			}
			getData();
			
			//清空数据
			function clearTable(){
				var db = conDB();
				var sql = "delete from dm_message";
				db.transaction(function (ts){
					ts.executeSql(
						sql,
						[],
						function (su){
							alert('clear success');
						},
						function (er){
							alert('clear error');
						}
					)
				});
			}
			

	</script>		
	</head>
	<body>
		<form>
			title:<input type="text" name="title" id="tval" /><br />
			contnet:<textarea name="content" id="cval"></textarea><br />
			<input type="button" value="Submit" οnclick="insertData()" />
		</form>
		<button οnclick="clearTable()">clear table</button>
		<hr />

		<div id="result">
			<table style="border: 1px solid grey;">
				<tr>
					<td>id</td><td>title</td><td>content</td>
				</tr>
			</table>
			
			<table style="border: 1px solid grey;" id="rsData">
			</table>
		</div>
	
	</body>
</html>