浏览器(Browser) WebSql 学习笔记

前言

1. 当前除火狐以外, 基本都支持WebSql
2. WebSql不是Html5标准

浏览器Browser的WebSQL文件位置

三个主要函数 : openDatabase , transaction , executeSql

openDatabase(数据库名, 版本号, 数据库描述, 数据大小(字节), 回调函数可选)

例如👇

let db=openDatabase('dbName', '1.0', '一段描述', "3*1024*1024", function(db){console.info(db);});

返回的 database 也是 回调 的唯一参数

在控制台测试时发现,如果加了回调, 则指定的版本无效, 版本始终为""空字符, 使用db.changeVersion(‘’,‘2’);也无法更改 , 但是在本地文件脚本中又可以

也可以不要回调👇 最少4参数. 最好不用回调

let db=openDatabase('dbName', '1.0', '一段描述', "3*1024*1024");

打开已存在的database可以将版本参数设为空字符

let db=openDatabase('dbName', '', '', 0);

transaction

transaction是openDatabase(…)返回的database的方法

openDatabase('dbName', '', '', 0).transaction(function(ts){
	ts.executeSql(sql);
});

executeSql(sql语句 , [替代问号的数组] , 成功回调 , 失败回调)

一个参数👇

	ts.executeSql("INSERT INTO table1 (姓名,年龄) VALUES ('小明','18')");

两个参数👇 第二个参数是数组, 用来填充sql中的问号

	ts.executeSql('INSERT INTO table1 (姓名,年龄) VALUES (?,?)'  , ['小明','18']);

三个参数👇 第三个参数是执行成功的回调

	ts.executeSql(
		//问号只能用于带引号的值 , 不能用于列名
		'INSERT INTO table1 (姓名,年龄) VALUES (?,?)' 
		, 
		['小明','18']
		,
		//成功回调有两参数 , 事务引用和结果引用
		function(SQLTransaction事务,SQLResultSet结果){console('执行成功');}
	);

四个参数👇 第四个参数是执行失败的回调

	ts.executeSql(
		//问号只能用于带引号的值 , 不能用于列名
		'INSERT INTO table1 (姓名,年龄) VALUES (?,?)' 
		, 
		['小明','18']
		,
		//成功回调有两个参数 , 事务引用和结果引用
		function(SQLTransaction事务,SQLResultSet结果){console('执行成功');}
		,
		//失败回调有两个参数 , 事务引用和错误引用
		function(SQLTransaction事务,SQLError错误){console('执行失败');}
	);

执行成功后的回调的第二个参数 SQLResultSet 查询时必须用到

SQLResultSet的重要属性是rows , 类型是SQLResultSetRowList , 有点像数组,
rows[0]表示结果的第一行 , rows[0].姓名或rows[0][‘姓名’]就能获得其值

	ts.executeSql(
		"SELECT * FROM table1"
		,
		null // 也可以用空数组 []
		,
		//成功回调有两个参数 , 事务引用和结果引用
		function(SQLTransaction事务, SQLResultSet结果){
			let rows = SQLResultSet结果.rows;
			let 行数 = rows.length;
			let 第一行第一列的值 = rows[0].第一列的名称;
		}
		,
		//失败回调有两个参数 , 事务引用和错误引用
		function(SQLTransaction事务, SQLError错误){
			let 错误消息 = SQLError错误.message;
		}
	);

完整示例1

openDatabase('database1', '', '', 0).transaction(function(ts){
	ts.executeSql("DROP TABLE table1");
										//sqlite可以不指定数据类型
	ts.executeSql("CREATE TABLE IF NOT EXISTS table1(姓名,年龄)");
	ts.executeSql(
		//问号只能用于带引号的值 , 不能用于列名
		'INSERT INTO table1 (姓名,年龄) VALUES (?,?)' 
		, 
		['小明','18']
		,
		//成功回调有两个参数 , 事务引用和结果引用
		function(SQLTransaction事务,SQLResultSet结果){console.info('新增成功');}
		,
		//失败回调有两个参数 , 事务引用和错误引用
		function(SQLTransaction事务,SQLError错误){console.info('新增失败');}
	);
	ts.executeSql("INSERT INTO table1 (姓名,年龄) VALUES ('大明','18')");
	ts.executeSql("INSERT INTO table1 (姓名,年龄) VALUES ('小红','18')");

	ts.executeSql("UPDATE table1 SET 年龄=? WHERE 姓名=?",['28','大明'] , function(t,r){console.info("更新成功"); }  ,  function(t,err){alert("更新失败,message="+err.message);}   );

	ts.executeSql("SELECT * FROM table1"
		,
		null // 也可以用空数组 []
		,
		function(transaction,result){
			let rows = result.rows;
			let div=document.createElement("div"); document.body.append(div); div.innerHTML="一共有 "+rows.length+" 行";
			for(let r of rows){
				let div = document.createElement("div"); document.body.append(div);
				for(let k in r){
					let v=r[k];
					let span = document.createElement("span"); span.innerHTML=v; div.append(span);
				}
			}
		}
		,
		function(transaction,err){
			alert("查询失败,message="+err.message);
		}
	);
	
});