小编给大家分享一下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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
