1. 程式人生 > >WebSQL創庫、表,增刪改查例子

WebSQL創庫、表,增刪改查例子

executeSql  注意大小寫!!!!錯一個方法都無效

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">

		//若建立資料庫名字,表名此前在別的webSQL已建立,那麼會直接引用裡面的資料內容,不會新建
		//設定資料庫名字,版本,連線池,大小
		var xx=window.openDatabase("mystore.db","1.0",null,20000);
		//建立表
		xx.transaction(function(tr){
			tr.executeSql("create table goods(_id integer primary key autoincrement,name text,price real)")
		})

		//增刪改的格式  xx.executeSql("sql語句",[引數])
		//插入資料
		function insertDate(){
		xx.transaction(function(tr){
			console.log(tr); //一個SQLTransaction{} 
			tr.executeSql("insert into goods(name,price) values(?,?)",["吳師傅",75562])
		})
		}
		//刪除資料庫
		function delTable(){
		xx.transaction(function(tr){
			tr.executeSql("drop table goods")
		})
		}

		//修改資料
		function updata1(id,name,price){
			xx.transaction(function(tr){
				tr.executeSql("update goods set name=?,price=? where _id=?",[name,price,id])
			})
		}
		//查詢資料
		function getData(){
			xx.transaction(function(tr){
				//result返回得就是陣列
				tr.executeSql('select * from goods',[],function(tr,result){
					console.log(result);
					for (var i = 0; i < result.rows.length; i++) {
						let dd=result.rows[i];
						document.write(dd._id+dd.name+dd.price)
					}
				}) //tr.executeSql
			})
		}
	</script>
</head>
<body>
	<button onclick="insertDate()">插入資料</button>
	<button onclick="delTable()">整張表刪除</button>
	<button onclick="updata1(2,'老李',100)">更新1號的資料</button>
	<button onclick="getData()">查詢資料</button>
</body>
</html>