本篇文章给大家带来的内容是关于web前端如何更新缓存？单例模式封装opendatabase ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
如果不了解opendatabase数据库的操作的各位，建议先学上一篇《web前端缓存之四opendatabase》后，再来看这一篇的内容，本章内容也是前端缓存系列的最后一遍，对opendatabase数据库的一个简单的封装，当然对于具有java基础的童鞋们，可以忽略此篇文章。
好了，废话不多说，直接直奔主题，请看正文吧（还是基于上一篇的实例来写的）：
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!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)";
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前端如何更新缓存？单例模式封装opendatabase 的全部介绍，如果您想了解更多有关HTML视频教程，请关注靠谱客。
以上就是web前端如何更新缓存？单例模式封装opendatabase的详细内容，更多请关注靠谱客其它相关文章！
最后
以上就是可耐铅笔最近收集整理的关于web前端如何更新缓存？单例模式封装opendatabase的全部内容，更多相关web前端如何更新缓存内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复