使用webSQL

最新推荐文章于 2022-11-27 22:10:53 发布

LPLIFE

最新推荐文章于 2022-11-27 22:10:53 发布

阅读量1.4k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/LPLIFE/article/details/79570806

版权

JavaScript 专栏收录该内容

76 篇文章 2 订阅

订阅专栏

 
  HTML5允许用户通过SQL访问本地数据库.在HTML4中,数据库只能放在服务器端,并通过服务器来访问数据库,而在HTML5中,用户可以像访问本地文件那样轻松地对本地数据库进行直接访问. 

 
  webSQL基础 

 
  html5新增了用户访问本地数据库地功能.数据库API的具体细节仍在完善. 

 
  使用webSQL 

 
 HTML5数据库API是以一个独立规范形式出现,包含3个核心方法. 

 
 openDatabase:使用现有数据库或创建新数据库的方式创建数据库对象 

 
 transaction:允许我们根据情况控制事务提交或回滚 

 
 executesql:用于执行真实的SQL查询 

 
 使用JavaScript脚本编写SQLLite数据库有两个必要的步骤: 

 
 1. 创建访问数据库的对象 

 
 2. 使用事务处理 

 
 1.创建或打开数据库 

 
 使用openDatabase方法来创建一个访问数据库的对象 

 
 语法: 

 
 openDatabase(DOMString name,DOMString version,DOMString displayName,estimatedSize,creation Callback) 

 
 openDatabase():可以打开已经存在的数据库,如果不存在则创建.openDatabase中五个参数分别表示:数据库名称,版本号,描述,数据库大小,创建回调.创建回调没有时也可以创建数据库. 

 
 例如: 

 
 创建一个数据库对象db,数据库名称Todo,版本号0.1. 

 
 db = openDatabase("Todo","0.1","A list of to do items.",20000); 

 
 检测创建的连接是否成功,可以检查数据库对象是否为null 

 
  if(!db) 

 
 alert("Failed to connect to database!"); 

 
 2.访问和操作数据库. 

 
  实际访问数据库的时候,还需要调用transaction方法,用来执行事务处理.使用事务处理,可以防止在对数据库进行访问及执行有关操作的时候受到外界的打扰.因为web上同时会有很多人都在对页面进行访问.使用事务来达到在操作完了之前,阻止别的用户访问数据库的目的. 

 
 语法: 

 
 transaction(function(tx){ }) 

 
 transaction()方法使用一个回调函数作为参数.在这个函数中,执行访问数据库的语句. 

 
 执行SQL查询: 

 
  使用transaction对象的executesql方法: 

 
 transaction.executesql(sqlquery,[],dataHandler,errorHandler): 

 
 1) 
 sqlquery: 需要执行的SQL语句 

 
 2) 
 []:SQL语句中所有使用到的参数的数据,将SQL语句中所要使用到的参数先用"?"代替,然后依次将这些参数组成数组放在第二个参数中.如下 

 
 transaction.executesql("update people set age-? where = ?;",[age,name],dataHandler,errorHandler): 

 
 3) 
 dataHandler:执行sql语句成功时调用的回调函数 

 
  function dataRandler(transaction,results){ 

}

 
 4) 
 errorHandler:执行SQL语句出错时调用的回调函数. 

 
 function errorHandler(transaction,errmeg){ 

}

 
 案例:创建本地数据库(包括建立数据库、建立表格、插入数据、查询数据，将数据结果显示) 

如下图:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="application/javascript">

 var db = openDatabase('mydb','1.0','Test DB',2*1024*1024);
 var msg;
db.transaction(function(tx){
	 
	tx.executeSql('create table if not exists logs(id unique,log)'); 
	
	tx.executeSql('insert into logs(id,log) values(1,"foobar")'); 
	
	tx.executeSql('insert into logs(id,log) values(2,"logmsg")'); 
	msg = '<p>完成消息创建和插入操作</p>';
	document.querySelector('#status').innerHTML = msg;
	
 });

db.transaction(function(tx){
	
        tx.executeSql('select *from logs',[],function(tx,results){
		var len = results.rows.length,i;
	    msg = "<p>查询的行数:"+len+"</p>";
	    document.querySelector('#status').innerHTML += msg;
		for(i=0;i<len;i++){
			 msg = '<p><b>'+results.rows.item(i).log+'</b></p>';
			 document.querySelector('#status').innerHTML += msg;
		}
		
		},null);
	
	});
</script>
</head>
<body>
<div id ="status" name="status"></div>
</body>
</html>

为了提高代码效率,可以通过数组实现快速存储数据:上述代码可以改为:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="application/javascript">

 var db = openDatabase('mydb','1.0','Test DB',2*1024*1024);
 var msg;
db.transaction(function(tx){
	 
	tx.executeSql('create table if not exists logs(id unique,log)'); 
	 var names=["张三","李四","王五","赵云","侯七","abc"]

	for(var i =0;i<names.length;i++ ){
		
		tx.executeSql('insert into logs(log) values(?)',[names[i]]); 
		
	}
 
	msg = '<p>完成消息创建和插入操作</p>';
	document.querySelector('#status').innerHTML = msg;
	
 });

db.transaction(function(tx){
	
        tx.executeSql('select *from logs',[],function(tx,results){
		var len = results.rows.length,i;
	    msg = "<p>查询的行数:"+len+"</p>";
	    document.querySelector('#status').innerHTML += msg;
		for(i=0;i<len;i++){
			 msg = '<p><b>'+results.rows.item(i).log+'</b></p>';
			 document.querySelector('#status').innerHTML += msg;
		}
		
		},null);
	
	});
</script>
</head>
<body>
<div id ="status" name="status"></div>
</body>
</html>

显示如下:

LPLIFE

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用webSQL

HTML5允许用户通过SQL访问本地数据库.在HTML4中,数据库只能放在服务器端,并通过服务器来访问数据库,而在HTML5中,用户可以像访问本地文件那样轻松地对本地数据库进行直接访问. webSQL基础 html5新增了用户访问本地数据库地功能.数据库API的具体细节仍在完善. 使用webSQLHTML5数据库API是以一个独立规范形式出现,包含3个核心方法.openDatabase:...
复制链接

扫一扫