openDatabase數(shù)據(jù)庫(kù)web前端緩存（代碼案例）
發(fā)表時(shí)間：2023-08-30 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于openDatabase數(shù)據(jù)庫(kù)web前端緩存（代碼實(shí)例），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。本次數(shù)據(jù)庫(kù)緩存的api學(xué)習(xí)要求對(duì)數(shù)據(jù)庫(kù)操作語(yǔ)句有點(diǎn)基礎(chǔ)認(rèn)知，如果不了解數(shù)據(jù)庫(kù)語(yǔ)句的簡(jiǎn)單的增刪查改的話，建議觀看此篇博客的童鞋先去小小的了解一下數(shù)據(jù)庫(kù)...
本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于openDatabase數(shù)據(jù)庫(kù)web前端緩存（代碼實(shí)例），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。
本次數(shù)據(jù)庫(kù)緩存的api學(xué)習(xí)要求對(duì)數(shù)據(jù)庫(kù)操作語(yǔ)句有點(diǎn)基礎(chǔ)認(rèn)知，如果不了解數(shù)據(jù)庫(kù)語(yǔ)句的簡(jiǎn)單的增刪查改的話，建議觀看此篇博客的童鞋先去小小的了解一下數(shù)據(jù)庫(kù)語(yǔ)句的增刪改查，本文也只是對(duì)數(shù)據(jù)庫(kù)表的增刪改查的基本操作的實(shí)例演示，并沒有做一些數(shù)據(jù)庫(kù)表的關(guān)聯(lián)操作，但滿足大家對(duì)前端數(shù)據(jù)緩存的大多數(shù)要求。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
openDatabase與android里面的sqlite差不多
最好的選型存儲(chǔ)
-->
<h1>opendatabse數(shù)據(jù)庫(kù)操作</h1>
<button id="btn-create">創(chuàng)建user數(shù)據(jù)表</button>
<button id="btn-insert">插入數(shù)據(jù)</button>
<button id="btn-query">查詢數(shù)據(jù)</button>
<button id="btn-update">修改數(shù)據(jù)</button>
<button id="btn-delete">刪除數(shù)據(jù)</button>
<button id="btn-drop">刪除user數(shù)據(jù)表</button>
<script type="text/javascript">
let findId = id => document.getElementById(id);
//模擬一條user數(shù)據(jù)
let user = {
username: "liuqiang",
password: "123569874",
info: "beaconApp開發(fā)團(tuán)隊(duì)中一員"
};
/**
* 創(chuàng)建數(shù)據(jù)庫(kù) 或者此數(shù)據(jù)庫(kù)已經(jīng)存在 那么就是打開數(shù)據(jù)庫(kù)
* name: 數(shù)據(jù)庫(kù)名稱
* version: 版本號(hào)
* displayName: 對(duì)數(shù)據(jù)庫(kù)的描述
* estimatedSize: 設(shè)置數(shù)據(jù)的大小
* creationCallback: 回調(diào)函數(shù)(可省略)
*/
let db = openDatabase("MySql", "1.0", "我的數(shù)據(jù)庫(kù)描述", 1024 * 1024);
let result = db ? "數(shù)據(jù)庫(kù)創(chuàng)建成功" : "數(shù)據(jù)庫(kù)創(chuàng)建失敗";
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)";
//創(chuàng)建數(shù)據(jù)表
function createTable() {
db.transaction(tx => {
tx.executeSql(USER_TABLE_SQL, [],
(tx, result) => {
alert('創(chuàng)建user表成功:' + result);
}, (tx, error) => {
alert('創(chuàng)建user表失敗:' + error.message);
})
})
}
const INSERT_USER_SQL = "insert into userTable (username, password,info) values(?,?,?)";
//插入數(shù)據(jù)
function insertData(user) {
db.transaction(tx => {
tx.executeSql(INSERT_USER_SQL,
[user.username, user.password, user.info],
(tx, result) => {
alert('添加數(shù)據(jù)成功:');
}, (tx, error) => {
alert('添加數(shù)據(jù)失敗:' + error.message);
})
})
}
const QUERY_USER_SQL = "select * from userTable";
//查詢數(shù)據(jù)
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 = ?";
//修改數(shù)據(jù)
function updateData(user) {
db.transaction(tx => {
tx.executeSql(UPDATE_USER_SQL, [user.password, user.username],
(tx, result) => {
alert("修改數(shù)據(jù)成功")
}, (tx, error) => {
alert("修改數(shù)據(jù)失敗:" + error.message)
})
})
}
const DELETE_USER_SQL = "delete from userTable where username = ?";
//刪除數(shù)據(jù)
function deleteData(user) {
db.transaction(tx => {
tx.executeSql(DELETE_USER_SQL, [user.username],
(transaction, resultSet) => {
alert("刪除數(shù)據(jù)成功")
}, (transaction, error) => {
alert("刪除數(shù)據(jù)失敗:" + error.message)
})
});
}
const DROP_USER_SQL = "drop table userTable";
//刪除數(shù)據(jù)表
function dropTable() {
db.transaction(tx => {
tx.executeSql(DROP_USER_SQL, [],
(transaction, resultSet) => {
alert("刪除數(shù)據(jù)表成功")
}, (transaction, error) => {
alert("刪除數(shù)據(jù)表失敗:" + error.message)
})
})
}
/**
* 點(diǎn)擊事件 增刪查改
*/
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>以上就是對(duì)openDatabase數(shù)據(jù)庫(kù)web前端緩存（代碼實(shí)例）的全部介紹，如果您想了解更多有關(guān)HTML視頻教程，請(qǐng)關(guān)注PHP中文網(wǎng)。
以上就是openDatabase數(shù)據(jù)庫(kù)web前端緩存（代碼實(shí)例）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
