HTML5 Web SQL 數(shù)據(jù)庫
Web SQL 數(shù)據(jù)庫 API 并不是 HTML5 規(guī)范的一部分濒募。但是它是一個(gè)獨(dú)立的規(guī)范呻粹，因?yàn)榘踩阅艿葐栴}蜀细，官方現(xiàn)在也已經(jīng)放棄了維護(hù)再芋。但是辜伟，這并不影響你對他的使用，只要你的數(shù)據(jù)不涉及到安全性能問題脊另，你大可去使用它导狡。當(dāng)然，它是基于MYSQL的偎痛，你要在學(xué)習(xí)他之前旱捧，你先的有一點(diǎn)mysql的知識。
核心方法
以下是規(guī)范中定義的三個(gè)核心方法：
- openDatabase：這個(gè)方法使用現(xiàn)有的數(shù)據(jù)庫或者新建的數(shù)據(jù)庫創(chuàng)建一個(gè)數(shù)據(jù)庫對象踩麦。
- transaction：這個(gè)方法讓我們能夠控制一個(gè)事務(wù)枚赡，以及基于這種情況執(zhí)行提交或者回滾。
- executeSql：這個(gè)方法用于執(zhí)行實(shí)際的 SQL 查詢谓谦。
打開數(shù)據(jù)庫
我們可以使用 openDatabase() 方法來打開已存在的數(shù)據(jù)庫贫橙，如果數(shù)據(jù)庫不存在，則會(huì)創(chuàng)建一個(gè)新的數(shù)據(jù)庫反粥，使用代碼如下：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,callback);
openDatabase() 方法對應(yīng)的五個(gè)參數(shù)說明：
- 數(shù)據(jù)庫名稱
- 版本號
- 描述文本
- 數(shù)據(jù)庫大小(單位是 b)
- 創(chuàng)建回調(diào)（非必須)
第五個(gè)參數(shù)卢肃，創(chuàng)建回調(diào)會(huì)在創(chuàng)建數(shù)據(jù)庫后被調(diào)用。
transaction
transaction方法用以處理事務(wù)才顿，當(dāng)一條語句執(zhí)行失敗的時(shí)候莫湘，整個(gè)事務(wù)回滾。方法有三個(gè)參數(shù)
- 包含事務(wù)內(nèi)容的一個(gè)方法
- 執(zhí)行成功回調(diào)函數(shù)（可選）
- 執(zhí)行失敗回調(diào)函數(shù)（可選）
executeSql
executeSql方法用以執(zhí)行SQL語句郑气，返回結(jié)果逊脯，方法有四個(gè)參數(shù)
- SQL語句
- 用以替換查詢字符串中問號的參數(shù)
- 執(zhí)行成功回調(diào)函數(shù)（可選）
- 執(zhí)行失敗回調(diào)函數(shù)（可選）
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("事務(wù)成功")
},(tx, res) => {
console.log("事務(wù)成功")
}
)
完整實(shí)例
這個(gè)例子有完整的，增竣贪、刪军洼、查操作
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">刪除數(shù)據(jù)庫</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))');
});
//添加數(shù)據(jù)
login_button.onclick = function() {
let username = document.getElementById("username").value;
let passwords = document.getElementById("password").value;
if(username && passwords) {
add(db,username, passwords);
}
}
//刪除全部數(shù)據(jù)
deleteBtn.onclick = function() {
deleteAllFn(db);
}
let dataLists = content.querySelectorAll("deleteClass");
//刪除單條數(shù)據(jù)
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);
}
})
}
//刪除單條數(shù)據(jù)
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);
});
}
//刪除全部數(shù)據(jù)
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);
});
}
//添加數(shù)據(jù)
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")
});
}
//讀取數(shù)據(jù)
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 class="rowClass">姓名：${item.u_name}</span>密碼：<span>${item.u_pwd}</span><span class="deleteClass" data-id= "${item.id}">刪除</span></p>`
}
content.innerHTML = str;
}, (tx, res) => {
console.log("9999", res)
});
});
}
//讀取數(shù)據(jù)
function renderDB(db, id, username, passwords) {
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM User WHERE id = ?", [id],
(tx, res) => {
content.innerHTML += `<p class="rowClass">姓名：${username}</span>密碼：<span>${passwords}</span><span data-id= "${id}" class="deleteClass">刪除</span></p>`
}, (tx, res) => {});
});
}
</script>
</body>
</html>
