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