js+websql_综合

原生js+WebSql/LocalStorage前端数据存储

一、简介

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() {
    //用户idvar 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