[前端] 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

相关文章

MySQL 主从复制部署及验证(示例详解)

《MySQL主从复制部署及验证(示例详解)》本文介绍MySQL主从复制部署步骤及学校管理数据库创建脚本,包含表结构设计、示例数据插入和查询语句,用于验证主从同步功能,感兴趣的朋友一起看看吧... 目录mysql 主从复制部署指南部署步骤1.环境准备2. 主服务器配置3. 创建复制用户4. 获取主服务器状态5

Spring Boot中的路径变量示例详解

《SpringBoot中的路径变量示例详解》SpringBoot中PathVariable通过@PathVariable注解实现URL参数与方法参数绑定,支持多参数接收、类型转换、可选参数、默认值及... 目录一. 基本用法与参数映射1.路径定义2.参数绑定&nhttp://www.chinasem.cnbs

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

PostgreSQL中rank()窗口函数实用指南与示例

《PostgreSQL中rank()窗口函数实用指南与示例》在数据分析和数据库管理中,经常需要对数据进行排名操作,PostgreSQL提供了强大的窗口函数rank(),可以方便地对结果集中的行进行排名... 目录一、rank()函数简介二、基础示例:部门内员工薪资排名示例数据排名查询三、高级应用示例1. 每

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定

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