溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下web前端更新緩存的方法是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
<!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)";
const INSERT_USER_SQL = "insert into userTable (username, password,info) values(?,?,?)";
const QUERY_USER_SQL = "select * from userTable";
const UPDATE_USER_SQL = "update userTable set password = ? where username = ?";
const DELETE_USER_SQL = "delete from userTable where username = ?";
const DROP_USER_SQL = "drop table userTable";
/**
* 封裝數據庫工具類
*/
class DatabaseUtil {
/**
* 構造方法
* @param sqlSentence 數據庫語句
* @param params 數據庫操作的參數
*/
constructor(sqlSentence, ...params) {
this.sqlSentence = sqlSentence;
this.params = params;
}
//獲取當前實例
static getInstance(sqlSentence, ...params) {
return new DatabaseUtil(sqlSentence, ...params)
}
/**
* 執行數據庫操作
* @param callback 成功的回調
* @param errorCallback 失敗的回調
*/
execute(callback, errorCallback) {
db.transaction(tx => {
tx.executeSql(this.sqlSentence, this.params, callback, errorCallback)
})
}
}
/**
* 點擊事件 增刪查改
*/
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 = () => DatabaseUtil.getInstance(USER_TABLE_SQL)
.execute(function (transaction, resultSet) {
alert('創建user表成功:' + result);
}, function (transaction, error) {
alert('創建user表失敗:' + error.message);
});
//插入數據
btnInsert.onclick = () => DatabaseUtil.getInstance(INSERT_USER_SQL, user.username, user.password, user.info)
.execute(function (transaction, resultSet) {
alert("添加數據成功")
}, function (transaction, error) {
alert("添加數據失敗:" + error.message)
});
//查詢數據
btnQuery.onclick = () => DatabaseUtil.getInstance(QUERY_USER_SQL)
.execute(function (transaction, resultSet) {
console.log(resultSet);
}, function (transaction, error) {
alert("查詢失敗:" + error.message)
});
//修改數據
btnUpdate.onclick = () => {
user.password = "111666666";//修改密碼
DatabaseUtil.getInstance(UPDATE_USER_SQL, user.password, user.username)
.execute(function (transaction, resultSet) {
alert("修改數據成功")
}, function (transaction, error) {
alert("修改數據失敗:" + error.message)
})
};
//刪除數據
btnDelete.onclick = () => DatabaseUtil.getInstance(DELETE_USER_SQL, user.username)
.execute(function (transaction, resultSet) {
alert("刪除數據成功")
}, function (transaction, error) {
alert("刪除數據失敗:" + error.message)
});
//刪除數據表
btnDrop.onclick = () => DatabaseUtil.getInstance(DROP_USER_SQL)
.execute(function (transaction, resultSet) {
alert("刪除數據表成功")
}, function (transaction, error) {
alert("刪除數據表失敗:" + error.message)
});
</script>
</body>
</html>以上是web前端更新緩存的方法是什么的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
