webSql的简单小例子

初始化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>