利用HTML+WEBSQL（sqlite）完成创建数据库，完成对数据的增删改查（使用原生JS编写）

前端和数据

在日常编写一些页面的时候总希望能够把“用户生产”的数据保存下来到数据库中。今天学习了如何用WEBSQL（可以理解为浏览器自带的SQLite数据库）进行数据的保存以及在前端页面中对数据库进行操作。

需要准备

一个支持使用WEBSQL的浏览器，本例使用的是Chrome。
首先一上来先把html里的元素写好，以及之后按钮对应的函数名等等

  <div>
      <table style=" width:100%">
		<input type="button" value="创建数据库JAY" onclick="createdb()" id="first"/>
		<input type="button" id="second" value="创建一个song表" onclick="createtable()"/>
		<input type="button" id="third" value="插入一首歌曲" onclick="insert()"/>
      </table>
  </div>
<div>
	歌曲名：<input type="text" id="inputsong" />
	喜欢人数：<input type="text" id="inputlove" />
<input type="button" id="insong" value="插入你写的歌" onclick="inputsong()"/>
</div>
<hr>
<div>
<input type="button" value="查询歌库" onclick="query()" id="query"/>	
</div>
<div>
<ul id="ul">
</ul>
</div>

JS部分

初始化和创建数据库

var db = openDatabase("JAY", "1.0", "it's to save jay'songs data!", 1024 * 1024); 
	function initDatabase() {
		//初始化数据库
	    var db = getCurrentDb();
	    if(!db) {
	        alert("对不起，浏览器不支持");
	        return;
	    }    
	    db.transaction(function (trans) {
	        trans.executeSql("create table if not exists Movie(title text null,url text null)", [], function (trans, result) {
	            
	        }, function (trans, message) {
	            alert(message);
	        });
	    }, function (trans, result) {
	    }, function (trans, message) {
	    });
	}
	//创建数据库
		first.onclick =function(){
			//打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小
			if(db!=""){
				alert("ok");
			}
			return db;
		}

首先介绍一下
openDatabase() 方法对应的五个参数：
1.数据库名称 2.版本号 3.描述文本 4.数据库大小 5.创建回调
第五个参数，创建回调会在创建数据库后被调用。这里的代码比较简单，主要就是声明了db，创建了这个db（数据库）‘JAY’。此时通过F12查看资源

数据库已经被创建完毕，接下来就是创建表。

创建表

second.onclick=function(){
		db.transaction(function (context) {
		context.executeSql('CREATE TABLE song (name VARCHAR,love INT)');
	}, function (error) {
		console.log('创建表失败:[' + error.message + ']');
	}, function () {
		console.log('创建表成功');
	});
		}

这里的代码就比较显而易见了，transaction的中文意思是事务，这里要进行的就是数据库db的一个事务。具体内容，执行sql语句创建song表，以及设置其对应字段名。失败则返回创建表失败，成功则返回创建表成功。

插入数据

创建代码写死的数据

//往表里插入数据
		var a="说好不哭";
		var b="5461686"
		third.onclick=function(){
		db.transaction(function (context) {
		context.executeSql('INSERT INTO song (name,LOVE) VALUES (?,?)',[a,b]);//使用占位符的方法，再获取用户输入的信息即可
	}, function (error) {
		console.log('插入数据失败:[' + error.message + ']');
	}, function () {
		console.log('插入数据成功');
	});
		}

创建用户自己填写的数据

//往表里获取用户输入的数据
	insong.onclick=function(){
		var song = document.getElementById("inputsong").value;
		var love = document.getElementById("inputlove").value;
		db.transaction(function (context) {
			context.executeSql('INSERT INTO song (name,LOVE) VALUES (?,?)',[song,love]);//使用占位符的方法，再获取用户输入的信息即可
		}, function (error) {
			console.log('插入数据失败:[' + error.message + ']');
		}, function () {
			console.log('插入数据成功');
		});
	}

这两种方法的原理都是一样的，第二种只是通过dom操作获取到用户输入进来的value值后再通过占位符将sql语句完整后再执行。

查看数据

//查询数据库
	query.onclick=function(){
		  db.transaction(function (context) {
			context.executeSql('SELECT * FROM song', [], function (context, results) {
			var items = results.rows;
			for (i = 0; i < items.length; i++) {
				var item = items.item(i);
				var li=document.createElement('li');
				li.innerText=item.name;
				ul.append(li);
				console.log(li);
				// var t1=["t1","t2","t3"];
				// document.getElementById(t1[i]).innerText=item.name;	
			}
		
		});
	}, function (error) {
		console.log('查询数据失败:[' + error.message + ']');
	}, function () {
		console.log('查询数据成功');
	});
	}

因为不使用框架，使用原生js这个代码稍显笨拙，通过for循环创建对应数量的li标签，把歌名用innerText的方式赋值给li。然后将li标签append到ul中这样即可完成查看数据库中的name的全部数据。

总结

本次的练习主要是把前端页面和数据库练习起来，通过前端页面的元素操作数据库。