-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-07-25
来源 ：
阅读 1289
评论 0
摘要：本篇教程探讨了webSQL数据库的相关内容，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。
本篇教程探讨了webSQL数据库的相关内容，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。
HTML5 Web SQL 数据库
Web SQL 数据库 API 并不是 HTML5 规范的一部分。但是它是一个独立的规范，因为安全性能等问题，官方现在也已经放弃了维护。但是，这并不影响你对他的使用，只要你的数据不涉及到安全性能问题，你大可去使用它。当然，它是基于MYSQL的，你要在学习他之前，你先的有一点mysql的知识。
核心方法
以下是规范中定义的三个核心方法：
· openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
· transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
· executeSql：这个方法用于执行实际的 SQL 查询。
打开数据库
我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库，使用代码如下：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,callback);
openDatabase() 方法对应的五个参数说明：
· 数据库名称
· 版本号
· 描述文本
· 数据库大小(单位是 b)
· 创建回调（非必须)
第五个参数，创建回调会在创建数据库后被调用。
transaction
transaction方法用以处理事务，当一条语句执行失败的时候，整个事务回滚。方法有三个参数
· 包含事务内容的一个方法
· 执行成功回调函数（可选）
· 执行失败回调函数（可选）
executeSql
executeSql方法用以执行SQL语句，返回结果，方法有四个参数
· SQL语句
· 用以替换查询字符串中问号的参数
· 执行成功回调函数（可选）
· 执行失败回调函数（可选）
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM User WHERE id = ?", [id],
(tx, res) => {
console.log("sql成功")
}, (tx, res) => {
console.log("sql失败")
});
}, (tx, res) => {
console.log("事务成功")
},(tx, res) => {
console.log("事务成功")
}
)
完整实例
这个例子有完整的，增、删、查操作
20180423_114749 (1).gif
20180423_123205.gif
20180423_123343.gif
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.login_wrap {
margin: 20px auto 0;
width: 300px;
height: 280px;
background: aqua;
text-align: center;
}
.login_username, .login_password {
height: 60px;
display: flex;
align-items: center;
}
input {
height: 30px;
}
.login_button {
width: 300px;
height: 36px;
line-height: 36px;
background: red;
cursor: pointer;
margin-top: 20px;
}
#content {
width: 400px;
margin: 0 auto;
background: aquamarine;
}
.rowClass {
line-height: 36px;
border: 1px solid #00FFFF;
display: flex;
justify-content: space-between;
}
.deleteClass {
padding: 5px;
background: cadetblue;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login_wrap">
<div class="login_username">
<label htmlFor="">用户名</label>
<input id="username" name="username" />
</div>
<div class="login_password">
<label htmlFor="">密码</label>
<input id="password" name="password" />
</div>
<div id="login_button" class="login_button">提交</div>
<div id="deleteBtn" class="login_button">删除数据库</div>
</div>
<div id="content"></div>
<script type="text/javascript">
window.onload = function() {
let login_button = document.getElementById("login_button");
let deleteBtn = document.getElementById("deleteBtn");
let content = document.getElementById("content");
var db = openDatabase('UDB', '1.0', 'Test DB', 2 * 1024 * 1024);
renderAllDB(db);
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS User(id INTEGER PRIMARY KEY AUTOINCREMENT,u_name VARCHAR(20),u_pwd VARCHAR(10))');
});
//添加数据
login_button.onclick = function() {
let username = document.getElementById("username").value;
let passwords = document.getElementById("password").value;
if(username && passwords) {
add(db,username, passwords);
}
}
//删除全部数据
deleteBtn.onclick = function() {
deleteAllFn(db);
}
let dataLists = content.querySelectorAll("deleteClass");
//删除单条数据
content.addEventListener("click",function(e){
var target = e.target;
var className = target.getAttribute("class");
if(className === "deleteClass"){
let id = target.getAttribute("data-id");
deleteFn(db,id);
}
})
}
//删除单条数据
function deleteFn(db,id) {
db.transaction(function(tx) {
tx.executeSql('DELETE FROM User WHERE id in (?)', [id], (tx, res) => {}, (tx, res) => {});
}, (tx, res) => {}, (tx, res) => {
renderAllDB(db);
});
}
//删除全部数据
function deleteAllFn(db) {
db.transaction(function(tx) {
tx.executeSql('DELETE FROM User', [], (tx, res) => {
console.log("deletesssss", tx, res)
}, () => {
console.log("deletesssss1111111111111111")
});
}, (tx) => {
console.log("22222222222222", tx)
}, (tx) => {
renderAllDB(db);
});
}
//添加数据
function add(db, username, passwords) {
db.transaction(function(tx) {
tx.executeSql('INSERT INTO User (u_name, u_pwd) VALUES (?,?)', [username, passwords],
function(tx, results) {
renderDB(db, results.insertId, username, passwords)
},
function(tx, res) {
console.log(tx, res.message)
})
}, (tx) => {
console.log("22222222222222", tx)
}, (tx) => {
console.log("1111111111111111")
});
}
//读取数据
function renderAllDB(db) {
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM User", [],
(tx, res) => {
let str = "";
let data = res.rows;
for(item of data) {
str += `<p>姓名：${item.u_name}</span>密码：<span>${item.u_pwd}</span><span data-id= "${item.id}">删除</span></p>`
}
content.innerHTML = str;
}, (tx, res) => {
console.log("9999", res)
});
});
}
//读取数据
function renderDB(db, id, username, passwords) {
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM User WHERE id = ?", [id],
(tx, res) => {
content.innerHTML += `<p>姓名：${username}</span>密码：<span>${passwords}</span><span data-id= "${id}">删除</span></p>`
}, (tx, res) => {});
});
}
</script>
</body>
</html>
本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML5/CSS3频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
