测试浏览器支持
if(!window.openDatabase) {
console.log('当前环境不支持websql');
return;
}
三个核心方法
- openDatabase：这个方法使用现有数据库或新建数据库来创建数据库对象
- transaction：这个方法允许我们根据情况控制事务提交或回滚
- executeSql：这个方法用于执行SQL 查询
openDatabase
//初始化websql数据库的参数信息
var config = {
name: 'local_db',//数据库名字
version: '',//数据库版本号
desc: 'my local db',//显示名字
size: 20 * 1024//数据库保存数据的大小（以字节为单位 )
};
var db = window.openDatabase(config.name, config.version, config.desc, config.size);
openDatabase接收五个参数：
- 数据库名字
- 数据库版本号
- 显示名字
- 数据库保存数据的大小（以字节为单位 )
- 回调函数（非必须)
如果提供了回调函数，回调函数用以调用 changeVersion() 函数，不管给定什么样的版本号，回调函数将把数据库的版本号设置为空。如果没有提供回调函数，则以给定的版本号创建数据库。
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方法用以处理事务，当一条语句执行失败的时候，整个事务回滚。方法有三个参数
- 包含事务内容的一个方法
- 执行成功回调函数（可选）
- 执行失败回调函数（可选）
executeSql
executeSql方法用以执行SQL语句，返回结果，方法有四个参数
- 查询字符串
- 用以替换查询字符串中问号的参数
- 执行成功回调函数（可选）
- 执行失败回调函数（可选）
示例同上
完整示例
<!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">
// 判定当前环境是否支持websql
// if(!window.openDatabase) {
// console.log('当前环境不支持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数据库的参数信息
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('执行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('影响记录条数:' + effectRow);
effectRow && console.log('执行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('影响记录条数:' + effectRow);
effectRow && console.log('执行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('影响记录条数:' + effectRow);
effectRow && console.log('执行sql成功');
}, errorCallback);
});
}
</script>
</html>
