一、简介
1、案列介绍
使用原生js+html+css,数据存储采用WebSql,LocalStorage.实现增删改查
2、HTML5 Web SQL 数据库简介
2.1、Web SQL
官方文档：https://www.runoob.com/html/html5-web-sql.html
Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。你也可以参考我们的 SQL 教程，了解更多数据库操作知识。Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。
2.2、核心方法
以下是规范中定义的三个核心方法：
- openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
- transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
- executeSql：这个方法用于执行实际的 SQL 查询。
2.3、使用案例
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
msg = '<p>数据表已创建，且插入了两条数据。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
3、LocalStorage
3.1、JavaScript存储对象
使用 localStorage 创建一个本地存储的 name/value 对，name=“lastname” value=“Smith”, 然后检索 “lastname” 的值，并插入到 id=“result” 的元素上:、
// 存储
localStorage.setItem("lastname", "Smith");
// 检索
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
3.2、定义与使用
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
localStorage 属性是只读的。
3.3、语法
window.localStorage
保存数据语法：
localStorage.setItem("key", "value");
读取数据语法：
var lastname = localStorage.getItem("key");
删除数据语法：
localStorage.removeItem("key");
二、功能实现
1、WebSql使用
新建js文件，单独存放websql相关操作，类似于数据访问层操作。
1.1、新增
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dARhH7BK-1619427775097)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145144056.png)]
1.2、修改
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BDze2ebt-1619427775100)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145217266.png)]
1.3、删除
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3i08keoo-1619427775101)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145237141.png)]
1.4、查询
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wf68pHkH-1619427775104)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145306701.png)]
1.5、数据库工具类，用于创建数据库，数据表等
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nSzVJRK8-1619427775105)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145344698.png)]
完整代码
/**
* WebSql数据访问层
*/
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-STQap9t3-1619427775107)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145501053.png)]
2.2、修改
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N30uebyY-1619427775108)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145555936.png)]
2.3、删除
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ROcaGUbl-1619427775109)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145611498.png)]
2.4、查询
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dl5OLvuv-1619427775109)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145629900.png)]
2.5、工具类
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ueOaM2gv-1619427775110)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419145720135.png)]
3、业务逻辑层
新建js文件，调用相应的数据访问层接口
3.1、添加用户
function saveEmp() {
//用户id
var empId = document.getElementById("empId").value;
//用户姓名
var empName = document.getElementById("empName").value;
//用户性别
var empGender = getGenderRadioVal(); //调用函数获取性别
//用户电话
var empTel = document.getElementById("empTel").value;
//用户电子邮件
var empEmail = document.getElementById("empEmail").value;
//用户状态
var empStatus = getStatusRadioVal(); //调用函数获取状态
//用户权限
var empAuth = getAuthCheckboxVal(); //调用函数获取权限
//用户头像
var empImg = document.getElementById("empImg").value;
//用户创建时间
var empCreateTime = document.getElementById("empCreateTime").value;
var nowDate = new Date();
empCreateTime = nowDate.format("yyyy-M-d h:m:s");
//用户备注
var empRemark = document.getElementById("empRemark").value;
//封装对象，将用户信息提交到数据库
var emp = {
ID: empId,
NAME: empName,
GENDER: empGender,
TEL: empTel,
EMAIL: empEmail,
STATUS: empStatus,
AUTH: empAuth,
USER_IMAGE: empImg,
CREATE_TIME: empCreateTime,
REMARK: empRemark
}
//
dao.addEmp(emp, function() {
alert("添加成功");
//添加成功关闭模态框
closeAddDialog()
//回显数据
getListEmps();
})
}
3.2、修改用户信息
修改前的用户信息回显至表单
function handleModify(id) {
//1.根据id获取对话框DOM对象
var dialogDOM = document.getElementById("modifyDialog");
//2.设置对象样式
dialogDOM.style.visibility = "visible";
//回显数据
dao.listEmpsId(id + "", function(emps) {
var modifyFromDom = document.modifyForm;
modifyFromDom.id.value = emps.ID;
modifyFromDom.name.value = emps.NAME;
modifyFromDom.gender.value = emps.GENDER;
modifyFromDom.tel.value = emps.TEL;
modifyFromDom.email.value = emps.EMAIL;
modifyFromDom.status.value = emps.STATUS;
modifyFromDom.auth.value = emps.AUTH;
modifyFromDom.upload_img.value = emps.USER_IMAGE;
modifyFromDom.create_time.value = emps.CREATE_TIME;
modifyFromDom.remark.value = emps.REMARK;
})
}
function updateEmp() {
var empId = document.getElementById("empIdModify").value;
var empName = document.getElementById("empNameModify").value;
var empGender = getGenderRadioVal();
var empTel = document.getElementById("empTelModify").value;
var empEmail = document.getElementById("empEmailModify").value;
var empStatus = getStatusRadioVal();
var empAuth = getAuthCheckboxVal();
var empImg = document.getElementById("empImgModify").value;
var empCreateTime = document.getElementById("empCreateTimeModify").value;
var empRemark = document.getElementById("empRemarkModify").value;
var emp = {
ID: empId,
NAME: empName,
GENDER: empGender,
TEL: empTel,
EMAIL: empEmail,
STATUS: empStatus,
AUTH: empAuth,
USER_IMAGE: empImg,
CREATE_TIME: empCreateTime,
REMARK: empRemark
}
//
dao.modifyEmp(emp, function() {
alert("修改成功");
//修改成功关闭模态框
closeModifyDialog()
//回显数据
getListEmps();
})
}
3.3、删除用户信息
function deleteEmpData(id) {
if (confirm("是否删除")) {
dao.removeEmp(id + "", function() {
alert("删除成功");
getListEmps();
})
}
}
3.4、查询用户信息
1）查询所有
function getListEmps() {
dao.listEmps(function(emps) {
//每次数据回显之前清空数据
var tableDOM = document.getElementsByTagName("table")[0];
var rows = tableDOM.rows;
for (var i = 1; i < rows.length;) {
tableDOM.deleteRow(i);
}
//向表格中重新加入数据
for (var i = 0; i < emps.length; i++) {
var row = tableDOM.insertRow(i + 1);
//新建单元格
var idCell = row.insertCell(0);
var nameCell = row.insertCell(1);
var genderCell = row.insertCell(2);
var telCell = row.insertCell(3);
var emailCell = row.insertCell(4);
var statusCell = row.insertCell(5);
var authCell = row.insertCell(6);
var imgCell = row.insertCell(7);
var createTimeCell = row.insertCell(8);
var remarkCell = row.insertCell(9);
var optionCell = row.insertCell(10);
//向单元格中添加数据
idCell.innerHTML = emps[i].ID;
nameCell.innerHTML = emps[i].NAME;
genderCell.innerHTML = emps[i].GENDER;
telCell.innerHTML = emps[i].TEL;
emailCell.innerHTML = emps[i].EMAIL;
statusCell.innerHTML = emps[i].STATUS;
authCell.innerHTML = emps[i].AUTH;
imgCell.innerHTML = emps[i].USER_IMAGE;
createTimeCell.innerHTML = emps[i].CREATE_TIME;
remarkCell.innerHTML = emps[i].REMARK;
optionCell.innerHTML = "<button οnclick='handleModify(" + emps[i].ID +
")'>编辑</button><button οnclick='deleteEmpData(" + emps[i].ID + ")'>删除</button>";
}
})
}
2）根据id查询
function getEmpByID() {
var empId = document.getElementById("empId").value;
dao.listEmpsId.execSQL(sql, [empId], function() {
return empId;
})
}
三、效果预览
1、数据源切换
根据单选按钮切换数据的存储方式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dgdFtLFw-1619427775112)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419150916778.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GTk7MRVh-1619427775113)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419150951084.png)]
2、编辑效果
点击编辑按钮后打开原生模态框，回显数据信息（些许bug未修复），点击删除按钮根据当前ID删除该条数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eTWXaWE5-1619427775114)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210419151331204.png)]
四、备注说明
-
本文仅作为个人学习总结、分享，希望各位大佬前辈可以多多指点，这也是我的第一篇正式博客。
-
界面或者功能上有很多不足的地方并未修正，这里仅简单实现增删改查功能。
-
有兴趣的朋友，可以一起交流探讨。如果觉得有用需要源码的朋友可以去我的个人中心免费下载
eturn empId;
})
}
## 三、效果预览
### 1、数据源切换
根据单选按钮切换数据的存储方式
[外链图片转存中...(img-dgdFtLFw-1619427775112)]
[外链图片转存中...(img-GTk7MRVh-1619427775113)]
### 2、编辑效果
点击编辑按钮后打开原生模态框，回显数据信息（些许bug未修复），点击删除按钮根据当前ID删除该条数据
[外链图片转存中...(img-eTWXaWE5-1619427775114)]
## 四、备注说明
1. 本文仅作为个人学习总结、分享，希望各位大佬前辈可以多多指点，这也是我的第一篇正式博客。
2. 界面或者功能上有很多不足的地方并未修正，这里仅简单实现增删改查功能。
3. 有兴趣的朋友，可以一起交流探讨。如果觉得有用需要源码的朋友可以去我的个人中心免费下载
https://download.csdn.net/download/qq_38197458/16754960