前端和数据
在日常编写一些页面的时候总希望能够把“用户生产”的数据保存下来到数据库中。今天学习了如何用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的全部数据。
总结
本次的练习主要是把前端页面和数据库练习起来，通过前端页面的元素操作数据库。