openDatabase数据库web前端缓存（代码实例）
发布时间：09/01 来源：未知 浏览：
关键词：
本次数据库缓存的api学习要求对数据库操纵语句有点根基认知，假如不理解数据库语句的简便的增删查改的话，倡议不雅看此篇博客的童鞋先去小小的理解一下数据库语句的增删改查，本文也只是对数据库表的增删改查的根本操纵的实例演示，并没有做一些数据库表的关联操纵，但知足大家对前端数据缓存的大多数要求。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
openDatabase与android里面的sqlite差不多
最好的选型储备
-->
<h1>opendatabse数据库操纵</h1>
<button id="btn-create">创立user数据表</button>
<button id="btn-insert">插入数据</button>
<button id="btn-query">查询数据</button>
<button id="btn-update">修改数据</button>
<button id="btn-delete">删除数据</button>
<button id="btn-drop">删除user数据表</button>
<script type="text/javascript">
let findId = id => document.getElementById(id);
//模拟一条user数据
let user = {
username: "liuqiang",
password: "123569874",
info: "beaconApp开发团队中一员"
};
/**
* 创立数据库 或者此数据库已经存在 那么就是翻开数据库
* name: 数据库名称
* version: 版本号
* displayName: 对数据库的描写
* estimatedSize: 设定数据的大小
* creationCallback: 回调函数(可省略)
*/
let db = openDatabase("MySql", "1.0", "我的数据库描写", 1024 * 1024);
let result = db ? "数据库创立成功" : "数据库创立失败";
console.log(result);
const USER_TABLE_SQL = "create table if not exists userTable (id integer primary key autoincrement,username varchar(12)," +
"password varchar(16),info text)";
//创立数据表
function createTable() {
db.transaction(tx => {
tx.executeSql(USER_TABLE_SQL, [],
(tx, result) => {
alert('创立user表成功:' + result);
}, (tx, error) => {
alert('创立user表失败:' + error.message);
})
})
}
const INSERT_USER_SQL = "insert into userTable (username, password,info) values(?,?,?)";
//插入数据
function insertData(user) {
db.transaction(tx => {
tx.executeSql(INSERT_USER_SQL,
[user.username, user.password, user.info],
(tx, result) => {
alert('增加数据成功:');
}, (tx, error) => {
alert('增加数据失败:' + error.message);
})
})
}
const QUERY_USER_SQL = "select * from userTable";
//查询数据
function queryData() {
db.transaction(tx => {
tx.executeSql(QUERY_USER_SQL, [],
(tx, result) => {
console.log(result);
},
(tx, error) => {
console.log('查询失败: ' + error.message)
})
})
}
const UPDATE_USER_SQL = "update userTable set password = ? where username = ?";
//修改数据
function updateData(user) {
db.transaction(tx => {
tx.executeSql(UPDATE_USER_SQL, [user.password, user.username],
(tx, result) => {
alert("修改数据成功")
}, (tx, error) => {
alert("修改数据失败:" + error.message)
})
})
}
const DELETE_USER_SQL = "delete from userTable where username = ?";
//删除数据
function deleteData(user) {
db.transaction(tx => {
tx.executeSql(DELETE_USER_SQL, [user.username],
(transaction, resultSet) => {
alert("删除数据成功")
}, (transaction, error) => {
alert("删除数据失败:" + error.message)
})
});
}
const DROP_USER_SQL = "drop table userTable";
//删除数据表
function dropTable() {
db.transaction(tx => {
tx.executeSql(DROP_USER_SQL, [],
(transaction, resultSet) => {
alert("删除数据表成功")
}, (transaction, error) => {
alert("删除数据表失败:" + error.message)
})
})
}
/**
* 点击事件 增删查改
*/
let btnCreate = findId("btn-create");
let btnInsert = findId("btn-insert");
let btnQuery = findId("btn-query");
let btnUpdate = findId("btn-update");
let btnDelete = findId("btn-delete");
let btnDrop = findId("btn-drop");
btnCreate.onclick = () => createTable();
btnInsert.onclick = () => insertData(user);
btnQuery.onclick = () => queryData();
btnUpdate.onclick = () => {
user.password = "111666666"; //修改密码
updateData(user);
};
btnDelete.onclick = () => deleteData(user);
btnDrop.onclick = () => dropTable();
</script>
</body>
</html>以上就是对openDatabase数据库web前端缓存（代码实例）的全部介绍，假如您想理解更多有关HTML视频教程，请关注PHP中文网。
以上就是openDatabase数据库web前端缓存（代码实例）的具体内容，更多请关注百分百源码网其它相关文章！
