[前端] webSQL介绍及简单示例

2024-05-05 09:58

本文主要是介绍[前端] webSQL介绍及简单示例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

HTML5 Web SQL

Html5数据库API是以一个独立规范形式出现,它包含三个核心方法:

1、openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象。

2、transaction:这个方法允许我们根据情况控制事务提交或回滚。

3、executeSql:这个方法用于执行真实的SQL查询。

打开数据库

openDatabase方法可以打开已经存在的数据库,不存在则创建:

 

 

var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);
openDatabasek中五个参数分别为:数据库名、版本号、描述、数据库大小、创建回调。创建回调没有也可以创建数据库。

 

 

执行查询

database.transaction()函数用来查询,下面将在mydatabase数据库中创建表t1:

var db = openDatabase(' mydatabase ', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');
});
 

插入操作

var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);db.transaction(function (tx) {tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');tx.executeSql('INSERT INTO t1 (id, log) VALUES (1, "foobar")');tx.executeSql('INSERT INTO t1 (id, log) VALUES (2, "logmsg")');
});
在插入新记录时,
我们还可以传递动态值,如:

 

var db = openDatabase(' mydatabase ', '2.0', 'my db', 2 * 1024);
db.transaction(function (tx) {tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');tx.executeSql('INSERT INTO t1   (id,log) VALUES (?, ?'), [e_id, e_log];  //e_id和e_log是外部变量
});

 

读操作

如果要读取已经存在的记录,我们使用一个回调捕获结果,代码如下:

var db = openDatabase(mydatabase, '2.0', 'my db', 2*1024);     db.transaction(function (tx) {tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');tx.executeSql('INSERT INTO t1 (id, log) VALUES (1, "foobar")');tx.executeSql('INSERT INTO t1 (id, log) VALUES (2, "logmsg")');
});
db.transaction(function (tx) {tx.executeSql('SELECT * FROM t1, [], function (tx, results) { var len = results.rows.length, i;msg = "<p>Found rows: " + len + "</p>";document.querySelector('#status').innerHTML +=  msg;for (i = 0; i < len; i++){alert(results.rows.item(i).log );}
}, null);
});
 
演示一:
<!DOCTYPE HTML>
<html>
<head><script type="text/javascript">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, "foobar")');tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');msg = '<p>Log message created and row inserted.</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>Found rows: " + 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);});</script>
</head>
<body>
<div id="status" name="status">Status Message</div>
</body>
</html>

 

效果:

 

演示二

 

HTML布局:

 

<table><tr><td>用户名:</td><td><input type="text" name="txtName" id="txtName" required/></td></tr><tr><td>标题:</td><td><input type="text" name="txtTitle" id="txtTitle" required/></td></tr><tr><td>留言:</td><td><input type="text" name="txtWords" id="txtWords" required/></td></tr>
</table>
<input type="button" value="保存" id="btnSave"/>
<hr/>
<input type="button" value="展示所哟数据" onclick="showAllTheData();"/><table id="tblData">
</table>
 

 

JS代码(需要jQuery):

 

<script type="text/javascript">function initDatabase() {var db = getCurrentDb();//初始化数据库if(!db) {alert("您的浏览器不支持HTML5本地数据库");return;}db.transaction(function (trans) {//启动一个事务,并设置回调函数//执行创建表的Sql脚本trans.executeSql("create table if not exists Demo(uName text null,title text null,words text null)",[],function (trans, result) { //结果回调},function (trans, message) {//消息的回调函数alert(message);});});});}$(function () {//页面加载完成后绑定页面按钮的点击事件initDatabase();$("#btnSave").click(function () {var txtName = $("#txtName").val();var txtTitle = $("#txtTitle").val();var txtWords = $("#txtWords").val();var db = getCurrentDb();//执行sql脚本,插入数据db.transaction(function (trans) {trans.executeSql("insert into Demo(uName,title,words) values(?,?,?) ", [txtName, txtTitle, txtWords], function (ts, data) {}, function (ts, message) {alert(message);});});showAllTheData();});});function getCurrentDb() {//打开数据库,或者直接连接数据库参数:数据库名称,版本,概述,大小//如果数据库不存在那么创建之var db = openDatabase("myDb", "1.0", "it's to save demo data!", 1024 * 1024); ;return db;}//显示所有数据库中的数据到页面上去function showAllTheData() {$("#tblData").empty();var db = getCurrentDb();db.transaction(function (trans) {trans.executeSql("select * from Demo ", [], function (ts, data) {if (data) {for (var i = 0; i < data.rows.length; i++) {appendDataToTable(data.rows.item(i));//获取某行数据的json对象}}}, function (ts, message) {alert(message);var tst = message;});});}function appendDataToTable(data) {//将数据展示到表格里面//uName,title,wordsvar txtName = data.uName;var txtTitle = data.title;var words = data.words;var strHtml = "";strHtml += "<tr>";strHtml += "<td>"+txtName+"</td>";strHtml += "<td>" + txtTitle + "</td>";strHtml += "<td>" + words + "</td>";strHtml += "</tr>";$("#tblData").append(strHtml);}
</script>
 

 

效果:

 

欢迎关注技术开发分享录:http://fenxianglu.cn/

这篇关于[前端] webSQL介绍及简单示例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/961425

相关文章

zookeeper端口说明及介绍

《zookeeper端口说明及介绍》:本文主要介绍zookeeper端口说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、zookeeper有三个端口(可以修改)aVNMqvZ二、3个端口的作用三、部署时注意总China编程结一、zookeeper有三个端口(可以

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中,有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后,有时候会需要自动创建分区。比如,一些表数据量非常大,有些数据是热点数据,按照日期分区MululbU

Python函数作用域示例详解

《Python函数作用域示例详解》本文介绍了Python中的LEGB作用域规则,详细解析了变量查找的四个层级,通过具体代码示例,展示了各层级的变量访问规则和特性,对python函数作用域相关知识感兴趣... 目录一、LEGB 规则二、作用域实例2.1 局部作用域(Local)2.2 闭包作用域(Enclos

Python中win32包的安装及常见用途介绍

《Python中win32包的安装及常见用途介绍》在Windows环境下,PythonWin32模块通常随Python安装包一起安装,:本文主要介绍Python中win32包的安装及常见用途的相关... 目录前言主要组件安装方法常见用途1. 操作Windows注册表2. 操作Windows服务3. 窗口操作

C++20管道运算符的实现示例

《C++20管道运算符的实现示例》本文简要介绍C++20管道运算符的使用与实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录标准库的管道运算符使用自己实现类似的管道运算符我们不打算介绍太多,因为它实际属于c++20最为重要的

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置(如匹配策略、转换器),可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例:简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹