通过web database数据库，进行简单的增删改查案例。
web database 前端数据库
database数据库可以自己定义空间大小，存储在浏览器端，类似本地数据库存储，
存储是多行多列值，用sql语句写作。
sql语句：
添加：insert into 表名(字段1，字段2) values(值1，值2);
修改：update 表名 set 字段2 = value，字段2 = value where 修改条件
删除：delete from 表名 where 条件
查询：select * from 表名 where 条件
属性和方法：
openDatabase(数据库名字,版本,说明,大小) 创建数据库;
transaction(执行函数,错误函数,成功函数) 执行事务提交和回滚的函数;
executeSql(sql语句,参数,成功函数,失败函数) 执行sql语句;
result.rows.length 获取信息的条数
result.rows.item(0) 获取第几条数据
result.rows.item(0)[字段名] 获取属性信息
代码案例：
index主要显示页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.wrap {
width: 600px;
height: 600px;
border: 1px solid black;
margin: 0 auto;
text-align: center;
}
table {
margin: 0 auto;
}
table,
td {
padding: 10px;
border-collapse: collapse;
border: 1px solid black;
}
#btn {
position: absolute;
bottom: 100px;
}
</style>
<script src="js/database.js"></script>
</head>
<body onload="search()">
<div class="wrap">
<h1>商品信息表</h1>
<table id="tab">
<tr>
<td>商品编号</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品颜色</td>
<td>商品价格</td>
<td>商品操作</td>
</tr>
</table>
<button id="btn" onclick="toadd()">添加</button>
</div>
<script></script>
</body>
</html>
addFoods添加商品页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.wrap {
width: 600px;
height: 600px;
border: 1px solid black;
margin: 0 auto;
text-align: center;
}
</style>
<script src="js/database.js"></script>
</head>
<body>
<div class="wrap">
<form action="" name="form">
<h1>添加商品</h1>
<p>商品名称:<input type="text" name="name" /></p>
<p>商品数量:<input type="number" name="count" /></p>
<p>商品颜色:<input type="text" name="color" /></p>
<p>商品价格:<input type="number" name="price" /></p>
<p><input type="button" id="addBtn" value="添加" onclick="add()"/></p>
</form>
</div>
</body>
</html>
updateFoods修改商品页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.wrap {
width: 600px;
height: 600px;
border: 1px solid black;
margin: 0 auto;
text-align: center;
}
</style>
<script src="js/database.js"></script>
</head>
<body onload="updateById()">
<div class="wrap">
<form action="" name="form">
<h1>修改商品</h1>
<p>商品名称:<input type="text" name="name" /></p>
<p>商品数量:<input type="number" name="count" /></p>
<p>商品颜色:<input type="text" name="color" /></p>
<p>商品价格:<input type="number" name="price" /></p>
<p><input type="button" id="addBtn" value="修改" onclick="update()"/></p>
</form>
</div>
</body>
</html>
js完整代码
//创建数据库
var db = openDatabase("food","1.0","商品信息",1024*1024);
//创建表
db.transaction(function(tx){
tx.executeSql("create table foods (id INTEGER PRIMARY KEY,name TEXT,count INTEGER,color TEXT,price INTEGER)");
})
// 创建本地对象存储id
if(!localStorage.getItem("num")){
localStorage.setItem("num",1);
}
//跳转到添加商品页面
function toadd(){
location.href = "addFoods.html"
}
//添加商品
function add(){
var id = localStorage.getItem("num");
var name = form.name.value;
var count = form.count.value;
var color = form.color.value;
var price = form.price.value;
db.transaction(function(tx){
tx.executeSql("insert into foods values(?,?,?,?,?)",[id,name,count,color,price],function(){
console.log("添加成功");
},
function (tx, error) {
console.log("error" + error.message);
})
})
var num = parseInt(localStorage.getItem("num")) + 1;
localStorage.setItem("num",num);
location.href = "index.html";
}
//查询
function search(){
db.transaction(function(tx){
tx.executeSql("select * from foods",[],function(tx,result){
var arr = result.rows
for(var i=0;i<arr.length;i++){
var id = arr[i]["id"];
var name = arr[i]["name"];
var count = arr[i]["count"];
var color = arr[i]["color"];
var price = arr[i]["price"];
tab.innerHTML += "<tr>"+
"<td>"+id+"</td>"+
"<td>"+name+"</td>"+
"<td>"+count+"</td>"+
"<td>"+color+"</td>"+
"<td>"+price+"</td>"+
"<td><input type='button' value='修改' onclick='toupdata("+id+")'><input type='button' value='删除' onclick='deldata("+id+")'></td></tr>"
}
},
function (tx, error) {
console.log("error" + error.message);
})
})
}
//跳转到修改页面，并传递id参数
function toupdata(id){
location.href = "updateFoods.html?id=" + id;
}
//通过id查找数据
function updateById(){
var id = location.search.substring(1).split("=")[1];
db.transaction(function(tx){
tx.executeSql("select * from foods where id=" + id,[],function(tx,result){
var arr = result.rows;
form.name.value = arr[0].name;
form.count.value = arr[0].count;
form.color.value = arr[0].color;
form.price.value = arr[0].price;
var inp = document.createElement("input");
inp.value = id;
inp.name = "id";
inp.type = "hidden";
document.getElementsByName("form")[0].appendChild(inp);
},
function (tx, error) {
console.log("error" + error.message);
});
})
}
//修改商品
function update(){
var id = form.id.value;
var name = form.name.value;
var count = form.count.value;
var color = form.color.value;
var price = form.price.value;
db.transaction(function(tx){
tx.executeSql("update foods set name = ?,count = ?,color = ?,price = ? where id = ?",[name,count,color,price,id],function(){
console.log("修改成功");
location.href = "index.html";
},
function (tx, error) {
console.log("error" + error.message);
});
})
}
//删除商品
function deldata(id){
var temp = confirm("确定要删除吗");
if(temp){
db.transaction(function(tx){
tx.executeSql("delete from foods where id = ?",[id],function(){
location.reload();
});
})
}
}