版权声明：本文为博主原创文章，未经博主允许不得转载。| www.qingning99.cn | 公众号：Worldhello | https://blog.csdn.net/vcx08/article/details/81942348
Web SQL
关于
Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。在当前的主流浏览器中全部支持Web SQL规范。
作用
Web SQL的存在可以将一些保密性不强的数据放在浏览器端进行操作，只把最终结果发送给服务器即可。这样可以既可以避免因网络延迟对用户造成的产品体验差的问题还可以极大的减轻服务器端的压力。对于有些实时性要求不高的功能，这样即使在断网的情况下仍然可以进行一些操作。
使用
- 【打开／创建】数据库
openDatabase() 方法对应的五个参数说明：
-数据库名称
-版本号
-数据库描述
-数据库大小（KB）
-创建回调函数（创建数据库后被调用）
var db = openDatabase('UserDB', '1.0', 'Test DB', 2 * 1024 * 1024,function{});2.创建数据表
db.transaction() 中的三个参数皆为函数
第一个为提交事务函数，第二个为事务提交成功回调函数，第三个为事务提交失败回调函数。注：第二、三参数可不写
tx.executeSql() 中有四个参数，
-SQL 语句
-参数列表 （一般情况下使用不到，因为SQL语句传进来时已经是拼接好的）
-SQL 语句执行成功的回调函数（若要获取查询结果在此函数中进行操作）
-SQL 语句执行失败的回调函数
db.transaction(
function(tx){
tx.executeSql(
"create table if not exists UserInfos(id int primary key, UserName Text, UserPwd Text)",
[],
function(){//success
},
function(tx,ex){alert(ex.message)}
);
},
function(){alert("创建数据表失败，建议使用谷歌浏览器")},
function(){//success
}
);注：一般情况下是将上面两段代码单独放到一个JS文件中，在项目的所有需要用到的文件中进行引用即可。
Demo1（人员信息管理）
项目文件结构(bootstrap框架)
+–css
+–fonts
+–img
+–js
+–login.html
+–addUserInfo.html
+–deleteUserInfo.html
+–queryUserInfo.html
+–updateUserInfo.html
主要功能
1.对人员信息的增删改查
特点
可以直接在表格中对人员信息进行动态更新
项目源码
login.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <title>登陆</title>
<script type="text/javascript" language="JavaScript">
function login(){
if(document.getElementById("userId").value!="" && document.getElementById("password").value!=""){
window.localStorage.setItem("userId",document.getElementById("userId").value);
window.localStorage.setItem("password",document.getElementById("password").value);
location.href = "updateUserInfo.html";
}else{
window.alert("输入框为空！请重新输入");
}
}
</script>
<link href="css/top.css" type="text/css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/top.js"></script>
<script language="javascript" src="js/jquery.idcode.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery.idcode.css" />
<style>
/*web background*/
.container{
display:table;
height:100%;
}
.row{
display: table-cell;
vertical-align: middle;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
text-align:left;
margin-right:-4px;
}
</style>
</head>
<body>
<!-- <input type="button" onclick="saveData()" value="授权" /> -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">登陆</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="http://blog.csdn.net/vcx08" target="_blank">壹言博客</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row row-centered">
<div class="well col-md-6 col-centered">
<h2>登陆后台管理系统</h2>
<div class="input-group input-group-md">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="userId" name="userId" maxlength="20" placeholder="请输入用户名"/>
</div>
<br/>
<div class="input-group input-group-md">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" class="form-control" id="password" name="password" maxlength="10" placeholder="请输入密码"/>
</div>
<br/>
<button id="submit" onclick="login()" class="btn btn-success btn-block">登陆</button>
</div>
</div>
</div>
</body>
</html>
addUserInfo.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>增加用户账号</title>
<script src="js/checkLogin.js"></script>
<script type="text/javascript" language="JavaScript">
var db = window.openDatabase(
"DBUser",
"1.0",
"The User's Account number DB",
2*1024*1024,
function(){
//alert("数据库创建成功！");
}
);
//create table
db.transaction(
function(tx){
tx.executeSql(
"create table if not exists UserInfos(id int primary key, UserName Text, UserPwd Text)",
[],
function(){//success
},
function(tx,ex){alert(ex.message)}
);
},
function(){alert("创建数据库失败，建议使用谷歌浏览器")},
function(){//success
}
);
function sqlExcute(sql,message){
db.transaction(
function(tx){
tx.executeSql(
sql,
[],
function(){//success
alert(message);
},
function(tx,ex){alert(ex.message)}
);
},
function(){alert("事务执行失败，建议使用谷歌浏览器")},
function(){//success
}
);
};
function RndNum(n){
var rnd="";
for(var i=0;i<n;i++)
rnd+=Math.floor(Math.random()*10);
return rnd;
}
function addUserInfo(){
if(document.getElementById("userId").value!="" && document.getElementById("password").value!=""){
var myDate = new Date();
var num = "";
num += myDate.getYear();
num += myDate.getMonth();
num += myDate.getDate();
num += RndNum(4);
var sql = "insert into UserInfos(id,UserName,UserPwd) values("+num+",'"+document.getElementById("userId").value+"','"+document.getElementById("password").value+"')";
sqlExcute(sql,"成功增加账号！");
document.getElementById("userId").value = "";
document.getElementById("password").value = "";
}else{
window.alert("输入框为空！请重新输入");
}
}
</script>
<link href="css/top.css" type="text/css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/top.js"></script>
<script language="javascript" src="js/jquery.idcode.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery.idcode.css" />
<style>
/*web background*/
.container{
display:table;
height:100%;
}
.row{
display: table-cell;
vertical-align: middle;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
text-align:left;
margin-right:-4px;
}
</style>
</head>
<body>
<!-- <input type="button" onclick="saveData()" value="授权" /> -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">用户信息管理</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#" >添加账号</a></li>
<li class="active"><a href="updateUserInfo.html" >修改账号</a></li>
<li class="active"><a href="deleteUserInfo.html" >删除账号</a></li>
<li class="active"><a href="queryUserInfo.html" >查询账号</a></li>
<li class="active"><a href="javascript:logout();" >退出系统</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row row-centered">
<div class="well col-md-6 col-centered">
<h2>填写账号信息</h2>
<div class="input-group input-group-md">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="userId" name="userId" maxlength="20" placeholder="请输入用户名"/>
</div>
<br/>
<div class="input-group input-group-md">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" class="form-control" id="password" name="password" maxlength="10" placeholder="请输入密码"/>
</div>
<br/>
<button id="submit" onclick="addUserInfo()" class="btn btn-success btn-block">增加信息</button>
</div>
</div>
</div>
</body>
</html>
deleteUserInfo.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>删除用户账号</title>
<script src="js/checkLogin.js"></script>
<script type="text/javascript" language="JavaScript">
var db = window.openDatabase(
"DBUser",
"1.0",
"The User's Account number DB",
2*1024*1024,
function(){
//alert("数据库创建成功！");
}
);
//create table
db.transaction(
function(tx){
tx.executeSql(
"create table if not exists UserInfos(id int primary key, UserName Text, UserPwd Text)",
[],
function(){//success
},
function(tx,ex){alert(ex.message)}
);
},
function(){alert("创建数据库失败，建议使用谷歌浏览器")},
function(){//success
}
);
function tests(mes){
//alert(mes);
if(confirm("是否删除此用户？ID为:"+mes)==true){
deleteUserInfo(mes);
}
showUserInfo();
};
function sqlExcute(sql,message){
db.transaction(
function(tx){
tx.executeSql(
sql,
[],
function(){//success
alert(message);
},
function(tx,ex){alert(ex.message)}
);
},
function(){alert("事务执行失败，建议使用谷歌浏览器")},
function(){//success
}
);
};
function showUserInfo(){
var msg = "";
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM UserInfos', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>用户总数: " + len + "</p>";
msg = msg + "<table class=\"table table-bordered\"><thead> <tr><th>ID</th><th>用户名</th><th>密码</th><th>操作</th></tr></thead>";
for (i = 0; i < len; i++){
msg = msg + "<tr><td>" + results.rows.item(i).id + "</td><td>" + results.rows.item(i).UserName + "</td><td>" + results.rows.item(i).UserPwd + "</td> <td><input type=\"button\" class=\"btn btn-danger\" name=\""+results.rows.item(i).id +"\" value=\"delete\" onclick=\"tests(this.name)\"></td></tr> ";
}//for
document.getElementById('userInfo').innerHTML = msg;
}, null);
});
};
window.onload = showUserInfo();
function deleteUserInfo(id){
var sql = "delete from UserInfos where id = "+id+"";
sqlExcute(sql,"成功删除账号！");
}
</script>
<link href="css/top.css" type="text/css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/top.js"></script>
<script language="javascript" src="js/jquery.idcode.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery.idcode.css" />
<style>
/*web background*/
.container{
display:table;
height:100%;
}
.row{
display: table-cell;
vertical-align: middle;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
text-align:left;
margin-right:-4px;
}
</style>
</head>
<body>
<!-- <input type="button" onclick="saveData()" value="授权" /> -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">用户信息管理</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="addUserInfo.html" >添加账号</a></li>
<li class="active"><a href="updateUserInfo.html" >修改账号</a></li>
<li class="active"><a href="deleteUserInfo.html" >删除账号</a></li>
<li class="active"><a href="queryUserInfo.html" >查询账号</a></li>
<li class="active"><a href="javascript:logout();" >退出系统</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row row-centered">
<div class="well col-md-6 col-centered" id="userInfo">
</div>
</div>
</div>
</body>
</html>
updateUserInfo.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>修改用户账号</title>
<script src="js/checkLogin.js"></script>
<script type="text/javascript" language="JavaScript">
var db = window.openDatabase(
"DBUser",
"1.0",
"The User's Account number DB",
2*1024*1024,
function(){
//alert("数据库创建成功！");
}
);
//create table
db.transaction(
function(tx){
tx.executeSql(
"create table if not exists UserInfos(id int primary key, UserName Text, UserPwd Text)",
[],
function(){//success
},
function(tx,ex){alert(ex.message)}
);
},
function(){alert("创建数据库失败，建议使用谷歌浏览器")},
function(){//success
}
);
function tests(mes){
//alert(mes);
//showUserInfo();
var uptable = document.getElementById("updatetable");
for(var i=0; i<uptable.rows.length; i++){
//alert(uptable.rows[i].cells[1].getAttribute("contentEditable"));
if(mes == uptable.rows[i].cells[0].innerHTML ){
//alert(uptable.rows[i].cells[1].getAttribute("contentEditable"));
//uptable.rows[i].cells[1].focus();
if(uptable.rows[i].cells[1].getAttribute("contentEditable") == null){
uptable.rows[i].cells[1].setAttribute("contentEditable","true");
uptable.rows[i].cells[2].setAttribute("contentEditable","true");
document.getElementById(mes).setAttribute("class","btn btn-success btn-block");
document.getElementById(mes).setAttribute("value","save");
uptable.rows[i].cells[1].focus();
}
else{
//alert("ddd");
var sql = "update UserInfos set UserName='"+uptable.rows[i].cells[1].innerHTML+"',UserPwd='"+uptable.rows[i].cells[2].innerHTML+"' where id = "+mes+"";
sqlExcute(sql,"成功修改账号信息！");
showUserInfo();
}
}
}
//showUserInfo();
};
function sqlExcute(sql,message){
db.transaction(
function(tx){
tx.executeSql(
sql,
[],
function(){//success
alert(message);
},
function(tx,ex){alert(ex.message)}
);
},
function(){alert("事务执行失败，建议使用谷歌浏览器")},
function(){//success
}
);
};
function showUserInfo(){
var msg = "";
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM UserInfos', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>用户总数: " + len + "</p>";
msg = msg + "<table class=\"table table-bordered\" id=\"updatetable\"><thead> <tr><th>ID</th><th>用户名</th><th>密码</th><th>操作</th></tr></thead>";
for (i = 0; i < len; i++){
msg = msg + "<tr><td>" + results.rows.item(i).id + "</td><td>" + results.rows.item(i).UserName + "</td><td>" + results.rows.item(i).UserPwd + "</td> <td><input type=\"button\" class=\"btn btn-warning\" id=\""+results.rows.item(i).id +"\" name=\""+results.rows.item(i).id +"\" value=\"update\" onclick=\"tests(this.name)\"></td></tr> ";
}//for
document.getElementById('userInfo').innerHTML = msg ;
}, null);
});
};
window.onload = showUserInfo();
function deleteUserInfo(id){
var sql = "delete from UserInfos where id = "+id+"";
sqlExcute(sql,"成功删除账号！");
}
</script>
<link href="css/top.css" type="text/css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/top.js"></script>
<script language="javascript" src="js/jquery.idcode.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery.idcode.css" />
<style>
/*web background*/
.container{
display:table;
height:100%;
}
.row{
display: table-cell;
vertical-align: middle;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
text-align:left;
margin-right:-4px;
}
</style>
</head>
<body>
<!-- <input type="button" onclick="saveData()" value="授权" /> -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">用户信息管理</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="addUserInfo.html" >添加账号</a></li>
<li class="active"><a href="updateUserInfo.html" >修改账号</a></li>
<li class="active"><a href="deleteUserInfo.html" >删除账号</a></li>
<li class="active"><a href="queryUserInfo.html" >查询账号</a></li>
<li class="active"><a href="javascript:logout();" >退出系统</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row row-centered">
<div class="well col-md-6 col-centered" id="userInfo">
</div>
</div>
</div>
</body>
</html>
queryUserInfo.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>查询用户账号</title>
<script src="js/checkLogin.js"></script>
<script type="text/javascript" language="JavaScript">
var db = window.openDatabase(
"DBUser",
"1.0",
"The User's Account number DB",
2*1024*1024,
function(){
//alert("数据库创建成功！");
}
);
//create table
db.transaction(
function(tx){
tx.executeSql(
"create table if not exists UserInfos(id int primary key, UserName Text, UserPwd Text)",
[],
function(){//success
},
function(tx,ex){alert(ex.message)}
);
},
function(){alert("创建数据库失败，建议使用谷歌浏览器")},
function(){//success
}
);
function showUserInfo(querySql){
//alert("1");
var msg = "";
db.transaction(function (tx) {
tx.executeSql(querySql, [], function (tx, results) {
var len = results.rows.length, i;
if(len == 0){
document.getElementById('rs').innerHTML = "</br>没有查询到相关信息！";
return;
}
msg = "<p>用户总数: " + len + "</p>";
msg = msg + "<table class=\"table table-bordered\"><thead> <tr><th>ID</th><th>用户名</th><th>密码</th></tr></thead>";
for (i = 0; i < len; i++){
msg = msg + "<tr><td>" + results.rows.item(i).id + "</td><td>" + results.rows.item(i).UserName + "</td><td>" + results.rows.item(i).UserPwd + "</td></tr> ";
}//for
document.getElementById('rs').innerHTML = msg;
}, null);
});
};
function sqlExcute(sql,message){
db.transaction(
function(tx){
tx.executeSql(
sql,
[],
function(){//success
//alert(message);
},
function(tx,ex){alert(ex.message)}
);
},
function(){alert("事务执行失败，建议使用谷歌浏览器")},
function(){//success
}
);
};
function RndNum(n){
var rnd="";
for(var i=0;i<n;i++)
rnd+=Math.floor(Math.random()*10);
return rnd;
}
function queryUserInfo(){
if(document.getElementById("userId").value!="" || document.getElementById("password").value!=""){
// var myDate = new Date();
// var num = "";
// num += myDate.getYear();
// num += myDate.getMonth();
// num += myDate.getDate();
// num += RndNum(4);
// var sql = "insert into UserInfos(id,UserName,UserPwd) values("+num+",'"+document.getElementById("userId").value+"','"+document.getElementById("password").value+"')";
// sqlExcute(sql,"成功增加账号！");
// document.getElementById("userId").value = "";
// document.getElementById("password").value = "";
//alert(document.getElementById("password").value);
var sql = "";
if(document.getElementById("password").value == ""){
sql = "select * from UserInfos where UserName = '"+document.getElementById("userId").value+"'";
}
else{
sql = "select * from UserInfos where id = "+document.getElementById("password").value+" or UserName = '"+document.getElementById("userId").value+"'";
}
//alert(sql);
showUserInfo(sql);
}else{
window.alert("输入框为空！请重新输入");
}
}
</script>
<link href="css/top.css" type="text/css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/top.js"></script>
<script language="javascript" src="js/jquery.idcode.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery.idcode.css" />
<style>
/*web background*/
.container{
display:table;
height:100%;
}
.row{
display: table-cell;
vertical-align: middle;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
text-align:left;
margin-right:-4px;
}
</style>
</head>
<body>
<!-- <input type="button" onclick="saveData()" value="授权" /> -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">用户信息管理</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="addUserInfo.html" >添加账号</a></li>
<li class="active"><a href="updateUserInfo.html" >修改账号</a></li>
<li class="active"><a href="deleteUserInfo.html" >删除账号</a></li>
<li class="active"><a href="#" >查询账号</a></li>
<li class="active"><a href="javascript:logout();" >退出系统</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row row-centered">
<div class="well col-md-6 col-centered">
<h2>查询账号信息</h2>
<div class="input-group input-group-md">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="userId" name="userId" maxlength="20" placeholder="请输入所查用户名"/>
</div>
<br/>
<div class="input-group input-group-md">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span>
<input type="text" class="form-control" id="password" name="password" maxlength="10" placeholder="请输入所查ID"/>
</div>
<br/>
<button id="submit" onclick="queryUserInfo()" class="btn btn-success btn-block">查询(任一即可)</button>
<div id="rs"></div>
</div>
</div>
</div>
</body>
</html>