jquery+easyui+WebSql/LocalStorage前端数据存储
一、简介
1、案列介绍
使用原生jquery+easyui框架,数据存储采用前端WebSql,LocalStorage.实现增删改查
参考文章：
二、功能实现
1、WebSql使用
新建js文件，单独存放websql相关操作，类似于数据访问层操作。
1.1、新增
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ErXKJTip-1619427867972)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145144056.png)]
1.2、修改
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N8pi6QZ5-1619427867974)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145217266.png)]
1.3、删除
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HjTTxBEs-1619427867976)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145237141.png)]
1.4、查询
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w9Nq2QDx-1619427867977)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145306701.png)]
1.5、数据库工具类，用于创建数据库，数据表等
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nvLUCAGk-1619427867979)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145344698.png)]
完整代码
var webSqlDao = {
/* 添加用户信息 */
addEmp(emp,callback){
var sql = "INSERT INTO EMP(ID,NAME,GENDER,TEL,EMAIL,STATUS,AUTH,USER_IMAGE,CREATE_TIME,REMARK) "
+"VALUES(?,?,?,?,?,?,?,?,?,?)";
webSqlDao.dbUtils.execSQL(sql,[emp.ID,emp.NAME,emp.GENDER,emp.TEL,emp.EMAIL,emp.STATUS,emp.AUTH,emp.USER_IMAGE,emp.CREATE_TIME,emp.REMARK],callback);
},
/* 修改用户信息 */
modifyEmp(emp,callback){
var sql = "UPDATE EMP SET NAME=?,GENDER=?,TEL=?,EMAIL=?,STATUS=?,AUTH=?,USER_IMAGE=?,CREATE_TIME=?,REMARK=? WHERE ID=?";
webSqlDao.dbUtils.execSQL(sql,[emp.NAME,emp.GENDER,emp.TEL,emp.EMAIL,emp.STATUS,emp.AUTH,emp.USER_IMAGE,emp.CREATE_TIME,emp.REMARK,emp.ID],callback);
},
/* 删除用户信息 */
removeEmp(id,callback){
var sql = "DELETE FROM EMP WHERE ID=?";
webSqlDao.dbUtils.execSQL(sql,[id],callback);
},
/* 查询所有用户信息*/
listEmps(callback){
var sql = "SELECT * FROM EMP";
webSqlDao.dbUtils.execSQL(sql,[],function(tx,results){
callback(results.rows);
});
},
/* 根据ID查询用户信息*/
listEmpsId(id,callback){
var sql = "SELECT * FROM EMP WHERE ID=?";
webSqlDao.dbUtils.execSQL(sql,[id],function(tx,results){
if(results.rows.length > 0){
callback(results.rows[0]);
}
});
},
/* 数据库操作工具类 */
dbUtils : {
// 打开数据库连接
getConnection(){
var db = openDatabase('test', '1.0', 'Test DB', 2 * 1024 * 1024);
//创建表,字段(id,姓名，性别，电话，电子邮件，状态，权限，头像，创建时间，备注)
db.transaction(function (tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS EMP(ID unique,NAME,GENDER,TEL,EMAIL,STATUS,AUTH,USER_IMAGE,CREATE_TIME,REMARK)");
})
return db;
},
// 执行sql语句
execSQL(sql,param,callback){
var db = webSqlDao.dbUtils.getConnection();
db.transaction(function (tx) {
tx.executeSql(sql,param,callback,function(e){
console.log(e)
});
})
}
}
}
2、LocalStorage使用
官方文档：https://www.runoob.com/jsref/prop-win-localstorage.html
2.1、新增
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ICFc6s2-1619427867980)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145501053.png)]
2.2、修改
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yApn4U9n-1619427867980)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145555936.png)]
2.3、删除
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0jeHucZC-1619427867981)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145611498.png)]
2.4、查询
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CtctvOGN-1619427867982)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145629900.png)]
2.5、工具类
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sHALzfto-1619427867983)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145720135.png)]
3、业务逻辑层
新建js文件，调用相应的数据访问层接口
3.1、添加用户
$(function() {
$("#saveEmp").click(function() {
var addFormDom = document.addForm;
var empId = addFormDom.empId.value;
var empName = addFormDom.empName.value;
var empGender = addFormDom.empGender.value;
var empTel = addFormDom.empTel.value;
var empEmail = addFormDom.empEmail.value;
var empStatus = addFormDom.empStatus.value;
var empImage = addFormDom.empImage.value;
var empAuth = getAuthCheckboxVal();
empCreateDate = Dateformat(new Date());
var empRemark = addFormDom.empRemark.value;
//封装对象，将用户信息提交到数据库
var emp = {
ID: empId,
NAME: empName,
GENDER: empGender,
TEL: empTel,
EMAIL: empEmail,
STATUS: empStatus,
AUTH: empAuth,
USER_IMAGE: empImage,
CREATE_TIME: empCreateDate,
REMARK: empRemark
}
dao.addEmp(emp, function() {
alert("添加成功");
$("#addDialog").dialog("close");
//重载页面
//$('#list table:not(:first)').datagrid('reload');
//location.reload();
getlistEmps();
})
});
});
3.2、修改用户信息
$(function() {
$("#modifyEmp").click(function() {
var modifyFormDom = document.modifyForm;
var empId = modifyFormDom.empId.value;
var empName = modifyFormDom.empName.value;
var empGender = modifyFormDom.empGender.value;
var empTel = modifyFormDom.empTel.value;
var empEmail = modifyFormDom.empEmail.value;
var empStatus = modifyFormDom.empStatus.value;
var empImage = modifyFormDom.empImage.value;
var empAuth = getAuthCheckboxVal();
var empCreateDate = Dateformat(new Date());
var empRemark = modifyFormDom.empRemark.value;
//封装对象，将用户信息提交到数据库
var emp = {
ID: empId,
NAME: empName,
GENDER: empGender,
TEL: empTel,
EMAIL: empEmail,
CREATE_TIME: empCreateDate,
STATUS: empStatus,
AUTH: empAuth,
USER_IMAGE: empImage,
REMARK: empRemark
}
dao.modifyEmp(emp, function() {
alert("修改成功");
$("#modifyDialog").dialog("close");
//重载页面
getlistEmps();
})
});
3.3、删除用户信息
function deleteEmpData(id) {
if (confirm("是否删除")) {
dao.removeEmp(id + "", function() {
alert("删除成功");
getlistEmps();
})
}
}
3.4、查询用户信息
function getlistEmps() {
//清空表格数据
$('#list .datagrid-body table tbody tr:gt(0)').remove();
dao.listEmps(function(emps) {
//向表格中重新加入数据
for (var i = 0; i < emps.length; i++) {
$("#list .datagrid-body table").append(
"<tr><td>" + " " + "</td>" +
"<td>" + emps[i].ID + "</td>" +
"<td>" + emps[i].NAME + "</td>" +
"<td>" + emps[i].GENDER + "</td>" +
"<td>" + emps[i].TEL + "</td>" +
"<td>" + emps[i].EMAIL + "</td>" +
"<td>" + emps[i].USER_IMAGE + "</td>" +
"<td>" + emps[i].AUTH + "</td>" +
"<td>" + emps[i].STATUS + "</td>" +
"<td>" + emps[i].CREATE_TIME + "</td>" +
"<td>" + emps[i].REMARK + "</td>" +
"<td><button οnclick='updateEmpData(" + emps[i].ID + ")'>修改</button>" +
"<button οnclick='deleteEmpData(" + emps[i].ID + ")'>删除</button></td></tr>"
);
}
})
}
三、页面准备
1、目录结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zMIOz9xa-1619427867984)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419155008821.png)]
2、页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/websql_dao.js"></script>
<script type="text/javascript" src="js/localstorage_dao.js"></script>
<script type="text/javascript" src="js/emp_management.js"></script>
</head>
<body>
<div>
<span>切换数据源：</span>
<input class="easyui-radiobutton" type="radio" name="data_source" value="1" onchange="dataSourceChange()" checked="checked">WebSQL</input>
<input class="easyui-radiobutton" type="radio" name="data_source" value="0" onchange="dataSourceChange()">LocalStroage</input>
</div>
<div id="lay" class="easyui-layout" fit=true style="width: 100%; height: 1000px">
<!-- 用户列表部分 -->
<div region="center" style="padding: 5px; background: #eee;" id="list">
<table id="datagrid"></table>
</div>
</div>
<!-- modal：新增模态窗口 closed：默认关闭-->
<div id="addDialog" title="新增用户" modal=true draggable=false class="easyui-dialog" closed=true style="width:300px;">
<form name="addForm">
<input type="hidden" name="id" value="" />
<table>
<tr>
<td>用户ID:</td>
<td><input type="text" name="empId" class="easyui-numberbox" required=true missingMessage="用户Id不能为空!,数字,不重复" value="" /></td>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" name="empName" class="easyui-validatebox" required=true missingMessage="用户名必填!"
invalidMessage="用户名必须在2到5个字符之间!" value="" /></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" name="empEmail"class="easyui-validatebox" validType='email' id="emailReg" missingMessage="请输入正确的邮箱格式!"
invalidMessage="请输入正确的邮箱格式" value="" /></td>
</tr>
<tr>
<td>电话:</td>
<td><input type="text" name="empTel" class="easyui-numberbox" validType='phoneNum' missingMessage="请输入正确的手机号格式!"
invalidMessage="请输入正确的手机号格式" value="" /></td>
</tr>
<tr>
<td>性别:</td>
<td>
男<input type="radio" checked="checked" name="empGender" value="男" formatter/>
女<input type="radio" name="empGender" value="女" formatter />
</td>
</tr>
<tr>
<td>状态:</td>
<td>
有效<input type="radio" checked="checked" name="empStatus" value="有效" />
无效<input type="radio" name="empStatus" value="无效" />
</td>
</tr>
<tr>
<td>权限:</td>
<td>
查询<input type="checkbox" name="empAuth" value="查询" />
新增<input type="checkbox" name="empAuth" value="新增" />
修改<input type="checkbox" name="empAuth" value="修改" />
删除<input type="checkbox" name="empAuth" value="删除" />
</td>
</tr>
<tr>
<td>用户头像:</td>
<td><input class="easyui-filebox" name="empImage" accept=".jpeg,.png"></td>
</tr>
<tr>
<td>备注:</td>
<td><input type="text" name="empRemark" class="easyui-validatebox" value="" /></td>
</tr>
<tr align="center">
<td colspan="2">
<a id="saveEmp" class="easyui-linkbutton">确定</a>
<a id="saveClose" class="easyui-linkbutton">关闭</a>
</td>
</tr>
</table>
</form>
</div>
<!-- modal：修改模态窗口 closed：默认关闭-->
<div id="modifyDialog" title="修改用户" modal=true draggable=false class="easyui-dialog" closed=true style="width:300px;">
<form name="modifyForm">
<input type="hidden" name="id" value="" />
<table>
<tr>
<td>用户ID:</td>
<td><input type="text" name="empId" class="easyui-validatebox" disabled="disabled" missingMessage="用户Id不能为空!,且不能重复" value="" /></td>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" name="empName" class="easyui-validatebox" required=true missingMessage="用户名必填!"
value="" /></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" name="empEmail" class="easyui-validatebox" validType="email" missingMessage="请输入正确的邮箱格式!"
invalidMessage="请输入正确的邮箱格式" value="" id="editEmail"/></td>
</tr>
<tr>
<td>电话:</td>
<td><input type="text" name="empTel" class="easyui-numberbox" validType="phone" missingMessage="请输入正确的手机号格式!"
invalidMessage="请输入正确的手机号格式" value="" /></td>
</tr>
<tr>
<td>性别:</td>
<td>
男<input type="radio" checked="checked" name="empGender" value="1" />
女<input type="radio" name="empGender" value="2" />
</td>
</tr>
<tr>
<td>状态:</td>
<td>
有效<input type="radio" checked="checked" name="empStatus" value="有效" />
无效<input type="radio" name="empStatus" value="无效" />
</td>
</tr>
<tr>
<td>权限:</td>
<td>
查询<input type="checkbox" name="empAuth" value="查询" />
新增<input type="checkbox" name="empAuth" value="新增" />
修改<input type="checkbox" name="empAuth" value="修改" />
删除<input type="checkbox" name="empAuth" value="删除" />
</td>
</tr>
<tr>
<td>用户头像:</td>
<td><input class="easyui-filebox" name="empImage" accept=".jpeg,.png"></td>
</tr>
<tr>
<td>备注:</td>
<td><input type="text" name="empRemark" class="easyui-validatebox" value="" /></td>
</tr>
<tr align="center">
<td colspan="2">
<a id="modifyEmp" class="easyui-linkbutton" >确定</a>
<a id="modifyClose" class="easyui-linkbutton">关闭</a>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
四、效果预览
1、首页
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b7MFGs7m-1619427867985)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419155308965.png)]
2、新增、修改（数据回显）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8aeh9AT9-1619427867987)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419155230360.png)]
3、数据存储位置
1、websql
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N2b5ArtE-1619427867988)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419155511338.png)]
2、localstorage
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zIT1k55C-1619427867988)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419155701774.png)]
四、备注说明
- 本文仅作为个人学习总结、分享，希望各位大佬前辈可以多多指点
- 界面或者功能上有很多不足的地方并未修正，这里仅简单实现增删改查功能。
- 有兴趣的朋友，可以一起交流探讨。如果觉得有用需要源码的朋友可以去我的个人中心免费下载
</body>
## 四、效果预览
### 1、首页
[外链图片转存中...(img-b7MFGs7m-1619427867985)]
### 2、新增、修改（数据回显）
[外链图片转存中...(img-8aeh9AT9-1619427867987)]
### 3、数据存储位置
#### 1、websql
[外链图片转存中...(img-N2b5ArtE-1619427867988)]
#### 2、localstorage
[外链图片转存中...(img-zIT1k55C-1619427867988)]
## 四、备注说明
1. 本文仅作为个人学习总结、分享，希望各位大佬前辈可以多多指点
2. 界面或者功能上有很多不足的地方并未修正，这里仅简单实现增删改查功能。
3. 有兴趣的朋友，可以一起交流探讨。如果觉得有用需要源码的朋友可以去我的个人中心免费下载
4. https://download.csdn.net/download/qq_38197458/16754970