js+websql

燕烨

2023-12-01

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