欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

webSql的简单小例子

程序员文章站 2022-04-08 17:09:47
...

初始化websql数据库的参数信息

1 var config = { 
2     name: 'my_plan',
3     version: '',
4     desc: 'manage my plans',
5     size: 20 * 1024
6 };
7  var db = window.openDatabase(config.name, config.version, config.desc, config.size);

此函数为创建一个表

1 function crateTable() {
2     var sql = 'create table if not exists t_plan(title, content, target_time, create_time)';
3     db.transaction(function(tx) {
4     　　tx.executeSql(sql, null, function(tx, rs) {
5             console.log('执行sql成功');
6         }, errorCallback);
7     });
8 }

接下来往表里增加一条数据

 1 function addPlan(values) {
 2      var sql = 'INSERT INTO t_plan (title, content, target_time, create_time) VALUES (?,?,?,?)';
 3      db.transaction(function(tx) {
 4      　　tx.executeSql(sql, values, function(tx, rs) {
 5                var effectRow = rs.rowsAffected;
 6                console.log('影响记录条数:' + effectRow);
 7                effectRow && console.log('执行sql成功');
 8          }, errorCallback);
 9     });
10 }

查询所以记录代码

1 function getPlanList() {
2     var sql = 'SELECT * FROM t_plan';
3     db.transaction(function(tx) {
4     　　tx.executeSql(sql, null, function(tx, rs) {
5            console.log('list:' + rs.rows);
6            console.log('item:' + JSON.stringify(rs.rows.item(0)));
7         }, errorCallback);
8    });
9 };

删除一条记录

 1 function deletePlan(values) {
 2      var sql = 'DELETE FROM t_plan WHERE title = ?';
 3      db.transaction(function(tx) {
 4           tx.executeSql(sql, values, function(tx, rs) {
 5                 var effectRow = rs.rowsAffected;
 6                 console.log('影响记录条数:' + effectRow);
 7                 effectRow && console.log('执行sql成功');
 8           }, errorCallback);
 9      });
10 }

修改一条记录

 1 function updatePlan(values) {
 2      var sql = 'UPDATE t_plan SET content = ? WHERE title = ?';
 3      db.transaction(function(tx) {
 4           tx.executeSql(sql, values, function(tx, rs) {
 5                var effectRow = rs.rowsAffected;
 6                console.log('影响记录条数:' + effectRow);
 7                effectRow && console.log('执行sql成功');
 8            }, errorCallback);
 9      });
10 }

 

 

下面附上源码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			input {
				display: block;
			}
		</style>
	</head>

	<body>
		<input type="text" id="title" />
		<input type="text" id="content" />
		<input type="text" id="target_time" />
		<button type="button" id="add_plan">add</button>
		<button type="button" id="select">select</button>
		<script type="text/javascript">
			//			(function() {
			document.getElementById("add_plan").addEventListener('click', function() {
				var title = document.getElementById("title").value;
				var content = document.getElementById("content").value;
				var targetTime = document.getElementById("target_time").value;
				var createTime = new Date().getTime();

				var values = [title, content, targetTime, createTime];
				addPlan(values);
			});
			document.getElementById("select").addEventListener('click', function() {
				getPlanList();
			});
			// 判定当前环境是否支持websql
			//				if(!window.openDatabase) {
			//					console.log('当前环境不支持websql');
			//					return;
			//				}

			var config = { //初始化websql数据库的参数信息
				name: 'my_plan',
				version: '',
				desc: 'manage my plans',
				size: 20 * 1024
			};
			var db = window.openDatabase(config.name, config.version, config.desc, config.size);

			crateTable(db);

			function errorCallback(error) {
				console.error('error:' + error.message);
			}

			function crateTable() {
				var sql = 'create table if not exists t_plan(title, content, target_time, create_time)';
				db.transaction(function(tx) {
					tx.executeSql(sql, null, function(tx, rs) {
						console.log('执行sql成功');
					}, errorCallback);
				});
			}

			function addPlan(values) {
				var sql = 'INSERT INTO t_plan (title, content, target_time, create_time) VALUES (?,?,?,?)';
				db.transaction(function(tx) {
					tx.executeSql(sql, values, function(tx, rs) {
						var effectRow = rs.rowsAffected;
						console.log('影响记录条数:' + effectRow);
						effectRow && console.log('执行sql成功');
					}, errorCallback);
				});
			}

			function getPlanList() {
				var sql = 'SELECT * FROM t_plan';
				db.transaction(function(tx) {
					tx.executeSql(sql, null, function(tx, rs) {
						console.log('list:' + rs.rows);
						console.log('item:' + JSON.stringify(rs.rows.item(0)));
					}, errorCallback);
				});
			};

			function deletePlan(values) {
				var sql = 'DELETE FROM t_plan WHERE title = ?';
				db.transaction(function(tx) {
					tx.executeSql(sql, values, function(tx, rs) {
						var effectRow = rs.rowsAffected;
						console.log('影响记录条数:' + effectRow);
						effectRow && console.log('执行sql成功');
					}, errorCallback);
				});
			}

			function updatePlan(values) {
				var sql = 'UPDATE t_plan SET content = ? WHERE title = ?';
				db.transaction(function(tx) {
					tx.executeSql(sql, values, function(tx, rs) {
						var effectRow = rs.rowsAffected;
						console.log('影响记录条数:' + effectRow);
						effectRow && console.log('执行sql成功');
					}, errorCallback);
				});
			}
			//			}());
		</script>
	</body>

</html>

　　

上一篇： python 文件读取的各种方式比较

下一篇： Shell----读取文件每一行的方式

推荐阅读