HTML5之本地存储

最新推荐文章于 2024-09-21 20:05:06 发布

maerdym

最新推荐文章于 2024-09-21 20:05:06 发布

阅读量2.4k

点赞数

分类专栏： HTML5 文章标签： html5 数据库 function sql input integer

本文链接：https://blog.csdn.net/maerdym/article/details/7426747

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

完整实例代码

最近实验室要做一款WebPOS系统，但要求本地离线也能用，因此就必须进行离线存储。幸运的是，HTML5提供了大量的本地数据存储功能,其中令人兴奋的是支持了WEBSQL.允许我们像写后台程序一样操作本地数据库。下面就介绍一下如何通过WebSql操作本地数据库，并配备一个人员管理的例子.

WebSql操作的数据库叫做SQLite,这款数据因其便捷轻巧,已在多个地方使用，如移动开发。使用WebSql操作数据库前，首要判断的是，浏览器是否支持本地数据库操作.判断的方法如下：

/** 判断浏览器是否支持WebSql数据库* */
function getOpenDatabase() {
	try {
		// 如果支持则返回数据库连接句柄
		if (!!window.openDatabase) {
			return window.openDatabase;
		} else {
			return undefined;
		}
	} catch (e) {
		return undefined;
	}
}

调用window对象的openDatabase()方法来获取本地数据库的一个连接句柄，如果该句柄为null、undefined则说明不支持本地数据库操作，反之，便提供本地数据库操作.接着我们连接本地数据库，并创建一张用来存储人员信息的人员记录表

/* 页面加载完成时调用的函数 */
function init() {

	initView();

	// 获取数据库连接句柄
	var odb = getOpenDatabase();

	// 如果获取的连接句柄为空或者不可用
	if (odb) {

		// 连接数据库，并获取数据库对象
		db = odb("testDatabase", "1.0", "This is a test database!",
				10 * 1024 * 1024);
		db.transaction(function(t) {
			// db.transaction(fun)方法用来操作数据库,fun为操作数据库的回调方法

			// 定义代执行的sql语句
			var createTableSql = "create table if not exists people ("
					+ "id Integer primary key autoincrement,"
					+ "name text not null," + "age Integer" + ")";

			// t.executeSql(sql,params,resultFun,errorFun)方法用来操作数据库,
			// 该方法含有四个参数,分别是：
			// 1.sql： 待执行的sql语句，sql语句中的条件值用?来表示,如name=?
			// 2.params： 用来指明sql语句中的条件值，该参数为一个数组，可以把条件值按顺序放入,如["simple"]
			// 3.resultFun: 数据库操作执行成功后的回调方法
			// 4.errorFun： 数据库执行失败后的回调方法
			t.executeSql(createTableSql, [], function(t, r) {
				log("创建成功!");
			}, function(t, e) {
				log("Create Table :" + e.message);
			});
		});
	} else {
		log("您的浏览器不支持本地数据库!");
	}
}

init方法是在页面onLoad时调用的方法,可在body标签中声明.上段代码中，首先使用连接句柄，连接本地数据库,代码如下：

		// 连接数据库，并获取数据库对象
		db = odb("testDatabase", "1.0", "This is a test database!",
				10 * 1024 * 1024);

连接时需指明4个参数:第一个参数表示数据库名称、第二个参数表示数据库版本号、第三个参数表示数据库描述、第四步指明数据库的大小。连接建立后，我们便可以调用数据库对象db的transaction(fun(t))方法来进行数据库操作了,该方法的唯一一个参数是一个方法，在js中方法也是一种类型，可以作为参数进行传递.这就是传说中的回调方法.执行该操作时，会调用传入的fun（t）进行数据库操作. 回调方法中的参数为数据操作的句柄，可以通过它来执行SQL语句操作,调用相应方法是excuteSql(sql,params,resultFun,errorFun),该方法还有四个参数，第一个参数是待执行的sql语句，第二个参数为sql语句中的变量值，第三个参数为执行成功后的回调方法，第四个参数为执行失败的回调方法.了解了这些之后，我们可以执行sql语句了，这里是创建一个people表，含有三个字段id,name和age.对数据库的增删改查即获取列表的方法如下：

新增人员：

/* 向数据库中新增一条人员信息记录 */
function savePeople() {
	// 从页面中获取用户输入的人员姓名
	var peopleName = input_name.value;
	// 从页面中获取用户输入的人员年龄
	var age = input_age.value;

	// 执行数据库操作，新增一条人员记录
	db.transaction(function(t) {

		// 声明代执行的sql语句
		var createTableSql = "insert into people values( null,'" + peopleName
				+ "'," + age + ")";
		// 执行sql语句
		t.executeSql(createTableSql, [], function(t, r) {
			log("插入数据成功!" + peopleName);
			findAllPeople();
		}, function(t, e) {
			log("Insert Table :" + e.message);
		});
	});
}

删除人员：

function deletePeople() {
	// 获取用户ID
	var id = input_id.value;

	// 执行数据库操作，新增一条人员记录
	db.transaction(function(t) {

		// 声明代执行的sql语句
		var createTableSql = "delete from people where id = ?";
		// 执行sql语句
		t.executeSql(createTableSql, [ id ], function(t, r) {
			log("删除数据成功! ID:" + id);
			findAllPeople();
		}, function(t, e) {
			log("Delete People :" + e.message);
		});
	});
}

更新人员信息：

function updatePeople() {
	// 获取用户ID
	var id = input_id.value;
	// 从页面中获取用户输入的人员姓名
	var peopleName = input_name.value;
	// 从页面中获取用户输入的人员年龄
	var age = input_age.value;

	// 执行数据库操作，新增一条人员记录
	db
			.transaction(function(t) {

				// 声明代执行的sql语句
				var createTableSql = "update people set name = ?, age = ? where id = ?";
				// 执行sql语句
				t.executeSql(createTableSql, [ peopleName, age, id ], function(
						t, r) {
					log("更新数据成功!" + peopleName);
					findPeople();
				}, function(t, e) {
					log("Update People :" + e.message);
				});
			});
}

查找指定人员信息：

/* 根据用户输入的ID查找指定人员信息 */
function findPeople() {

	// 获取用户输入的ID
	var id = input_id.value;

	log("查询人员记录，	ID: " + id);

	// 执行数据库操作，查询人员记录
	db.transaction(function(t) {

		var querySql = "select * from people where id = ?";
		t.executeSql(querySql, [ id ], function(t, r) {
			showTableData(r.rows, div_peopleList);

			if (r.rows.length > 0) {
				var row = r.rows.item(0);
				input_id.value = row.id;
				input_name.value = row.name;
				input_age.value = row.age;
			}

		}, function(t, e) {
			log("Can't get the data");
		});
	});
}

查找人员列表信息：

/* 获取人员列表 */
function findAllPeople() {

	db.readTransaction(function(t) {

		var querySql = "select * from people";
		t.executeSql(querySql, [], function(t, r) {
			showTableData(r.rows, div_peopleList);
		}, function(t, e) {
			log("Can't get the data");
		});
	});
}

记录操作日志：

function log(text) {
	label_log.innerHTML = text;
}

生成数据表格：

var tableBegin = "<table>";
					

var tableHeader = "<tr class='header'>" + 
					"<td>ID</td>" +
					"<td>Name</td>" +
					"<td>Age</td>" + 
					"</tr>";
var tableEnd = "</table>";

var trBegin = "<tr class='content'>";
var trEnd = "</tr>";

var tdBegin = "<td>";
var tdEnd = "</td>";

//为视图组件内添加一个表格，用于显示rows中的数据
function showTableData(rows, view){
	
	var tableHtml = tableBegin;
	
	tableHtml += tableHeader;
	
	var len = rows.length;
	
	
	for ( var i = 0; i < len; i++) {
		
		
		
		var row = rows.item(i);
		tableHtml += trBegin;
			tableHtml += tdBegin;
				tableHtml += row.id;
			tableHtml += tdEnd;
			
			tableHtml += tdBegin;
				tableHtml += row.name;
			tableHtml += tdEnd;
			
			tableHtml += tdBegin;
				tableHtml += row.age;
			tableHtml += tdEnd;
		tableHtml += trEnd; 
		
		
	}
	
	tableHtml += tableEnd;
	
	view.innerHTML = tableHtml;
	
}

完整实例代码