測(cè)試瀏覽器支持
if(!window.openDatabase) {
console.log('當(dāng)前環(huán)境不支持websql');
return;
}
三個(gè)核心方法
- openDatabase:這個(gè)方法使用現(xiàn)有數(shù)據(jù)庫或新建數(shù)據(jù)庫來創(chuàng)建數(shù)據(jù)庫對(duì)象
- transaction:這個(gè)方法允許我們根據(jù)情況控制事務(wù)提交或回滾
- executeSql:這個(gè)方法用于執(zhí)行SQL 查詢
openDatabase
//初始化websql數(shù)據(jù)庫的參數(shù)信息
var config = {
name: 'local_db',//數(shù)據(jù)庫名字
version: '',//數(shù)據(jù)庫版本號(hào)
desc: 'my local db',//顯示名字
size: 20 * 1024//數(shù)據(jù)庫保存數(shù)據(jù)的大小(以字節(jié)為單位 )
};
var db = window.openDatabase(config.name, config.version, config.desc, config.size);
openDatabase接收五個(gè)參數(shù):
- 數(shù)據(jù)庫名字
- 數(shù)據(jù)庫版本號(hào)
- 顯示名字
- 數(shù)據(jù)庫保存數(shù)據(jù)的大惺粗(以字節(jié)為單位 )
- 回調(diào)函數(shù)(非必須)
如果提供了回調(diào)函數(shù)失受,回調(diào)函數(shù)用以調(diào)用 changeVersion() 函數(shù)兄旬,不管給定什么樣的版本號(hào),回調(diào)函數(shù)將把數(shù)據(jù)庫的版本號(hào)設(shè)置為空音诈。如果沒有提供回調(diào)函數(shù),則以給定的版本號(hào)創(chuàng)建數(shù)據(jù)庫。
transaction
var sql = 'SELECT * FROM t_plan';
db.transaction(function(tx) {
tx.executeSql(sql, null, function(tx, rs) {
console.log('list:' + rs.rows);
}, errorCallback);
});
function errorCallback(error) {
console.error('error:' + error.message);
}
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ù)
- 查詢字符串
- 用以替換查詢字符串中問號(hào)的參數(shù)
- 執(zhí)行成功回調(diào)函數(shù)(可選)
- 執(zhí)行失敗回調(diào)函數(shù)(可選)
示例同上
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
label{
width: 120px;
display: inline-block;
}
</style>
</head>
<body>
<label for="title">title: </label>
<input type="text" id="title"/><br>
<label for="title">content:</label>
<input type="text" id="content"/><br>
<label for="target_time">target_time:</label>
<input type="text" id="target_time"/><br>
<button type="button" id="add_plan">add</button>
<button type="button" id="select">select</button>
<button type="button" id="update">update</button>
<button type="button" id="delete">delete</button>
</body>
<script type="text/javascript">
// 判定當(dāng)前環(huán)境是否支持websql
// if(!window.openDatabase) {
// console.log('當(dāng)前環(huán)境不支持websql');
// return;
// }
document.getElementById("add_plan").addEventListener('click', function() {
var title = document.getElementById("title").value;
var content = document.getElementById("content").value;
var targetTime = document.getElementById("target_time").value;
var createTime = new Date().getTime();
var values = [title, content, targetTime, createTime];
addPlan(values);
});
document.getElementById("select").addEventListener('click', function() {
getPlanList();
});
document.getElementById("update").addEventListener('click', function() {
var content = document.getElementById("content").value;
var title = document.getElementById("title").value;
var values = [content, title];
updatePlan(values);
});
document.getElementById("delete").addEventListener('click', function() {
var title = document.getElementById("title").value;
var values = [title];
deletePlan(values);
});
var config = { //初始化websql數(shù)據(jù)庫的參數(shù)信息
name: 'my_plan',
version: '',
desc: 'manage my plans',
size: 20 * 1024
};
var db = window.openDatabase(config.name, config.version, config.desc, config.size);
crateTable(db);
function errorCallback(error) {
console.error('error:' + error.message);
}
function crateTable() {
var sql = 'create table if not exists t_plan(title, content, target_time, create_time)';
db.transaction(function(tx) {
tx.executeSql(sql, null, function(tx, rs) {
console.log('執(zhí)行sql成功');
}, errorCallback);
});
}
function addPlan(values) {
var sql = 'INSERT INTO t_plan (title, content, target_time, create_time) VALUES (?,?,?,?)';
db.transaction(function(tx) {
tx.executeSql(sql, values, function(tx, rs) {
var effectRow = rs.rowsAffected;
console.log('影響記錄條數(shù):' + effectRow);
effectRow && console.log('執(zhí)行sql成功');
}, errorCallback);
});
}
function getPlanList() {
var sql = 'SELECT * FROM t_plan';
db.transaction(function(tx) {
tx.executeSql(sql, null, function(tx, rs) {
console.log('list:' + rs.rows);
console.log('item:' + JSON.stringify(rs.rows.item(0)));
}, errorCallback);
});
}
function deletePlan(values) {
var sql = 'DELETE FROM t_plan WHERE title = ?';
db.transaction(function(tx) {
tx.executeSql(sql, values, function(tx, rs) {
var effectRow = rs.rowsAffected;
console.log('影響記錄條數(shù):' + effectRow);
effectRow && console.log('執(zhí)行sql成功');
}, errorCallback);
});
}
function updatePlan(values) {
var sql = 'UPDATE t_plan SET content = ? WHERE title = ?';
db.transaction(function(tx) {
tx.executeSql(sql, values, function(tx, rs) {
var effectRow = rs.rowsAffected;
console.log('影響記錄條數(shù):' + effectRow);
effectRow && console.log('執(zhí)行sql成功');
}, errorCallback);
});
}
</script>
</html>