溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹openDatabase數據庫web前端緩存的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
本次數據庫緩存的api學習要求對數據庫操作語句有點基礎認知，如果不了解數據庫語句的簡單的增刪查改的話，建議觀看此篇博客的童鞋先去小小的了解一下數據庫語句的增刪改查，本文也只是對數據庫表的增刪改查的基本操作的實例演示，并沒有做一些數據庫表的關聯操作，但滿足大家對前端數據緩存的大多數要求。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
openDatabase與android里面的sqlite差不多
最好的選型存儲
-->
<h2>opendatabse數據庫操作</h2>
<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前端緩存的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
