web前端基础入门开发教程之HTML5 Web SQL 数据库
5 浏览量
2021-01-08
17:22:56
上传
评论 1
收藏 120KB PDF 举报
web前端基础入门开发教程之前端基础入门开发教程之HTML5 Web SQL 数据库数据库
HTML5 Web SQL 数据库数据库
Web SQL 是在浏览器上模拟数据库，可以使用JS来操作SQL完成对数据的读写。
Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。
如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。
你也可以参考我们的 SQL 教程，了解更多数据库操作知识。
Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，
并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
核心方法核心方法
以下是规范中定义的三个核心方法：
openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。
打开数据库打开数据库
我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库，使用代码如下：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
openDatabase() 方法对应的五个参数说明：
数据库名称
版本号
描述文本
数据库大小
创建回调
第五个参数，创建回调会在创建数据库后被调用。
执行查询操作执行查询操作
执行操作使用 database.transaction() 函数：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});
上面的语句执行后会在 ‘mydb’ 数据库中创建一个名为 LOGS 的表。
插入数据插入数据
在执行上面的创建表语句后，我们可以插入一些数据：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "W3Cschool教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3cschool.cn")');
});
我们也可以使用动态值来插入数据：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);
});
实例中的 e_id 和 e_log 是外部变量，executeSql 会映射数组参数中的每个条目给 “?”。
读取数据读取数据
以下实例演示了如何读取数据库中已经存在的数据：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "W3Cschool教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3cschool.cn")');
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "
查询记录条数: ” + len + “
“; document.querySelector(‘#status’).innerHTML += msg; for (i = 0; i < len; i++){ alert(results.rows.item(i).log ); } }, null); });
完整实例完整实例
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
weixin_38599537
- 粉丝: 8
- 资源: 923
最新资源
- 毕业设计基于STM32的测量温度与压力的数据处理设计C语言完整源码+论文.zip
- 基于MATLAB的PCA算法人脸识别项目源码+GUI界面+说明文档.zip
- 基于STM32的测量温度与压力的数据处理设计源码+论文（毕业设计）.zip
- Vision Transformer 网络对不同氨气氧气浓度轨迹RAS 图像数据集的分类，包含训练权重和数据集、迁移学习
- 基于C51带字库LCD12864（ST7920）的keil工程源码,只支持8位并口通讯(不支持串口)，可显示中文.zip
- 基于SI4463射频模块433MD-SMA无线模块软硬件技术资料及（SI4463）IC技术资料文档.zip
- (GPS+北斗+GSM)HLK-GS2503模块软硬件开发资料包硬件参考设计（原理图PCB）+技术文档资料.zip
- 基于BERT+Biaffine结构的关系抽取模型源码+文档说明.zip
- 利用c语言编写的冒泡排序代码
- 基于Ansoft-HFSS知识总结hfss中文教程HFSS培训教材等技术资料合集（50个）.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0