HTML5 Web SQL 数据库 讲解及使用
为什么页面刷新后表就没了?openDatabase是什么?openDatabase是浏览器提供的吗?
Web SQL 是在浏览器上模拟数据库,可以使用 JS 来操作 SQL 完成对数据的读写。
Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。
Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。
核心方法
以下是规范中定义的三个核心方法:
- openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
- transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
- executeSql:这个方法用于执行实际的 SQL 查询。
db = {};created(){// 页面每次加载 调用 初始化this.handleCreateSql();
},methods:{// 初始化
handleCreateSql(){/* * openDatabase 作用:* 初始化 web SQL 对象* after.. 可打开已创建过的 web SQL 数据库表* after.. 可用于创建新的 web SQL 数据库表*/this.db = openDatabase(`zu_db`,"1.0",`我创建的db`,2 * 1024 * 1024,()=>{});/* * 依次解析:* 1.数据库名称* 2.数据库版本号 (随便填写就行)* 3.数据库描述 (随便填写就行)* 4.数据库大小 (正常这个就够用了,不够用自己改一下就行)* 5.回调函数 (不必须,这个回调函数本人试过,貌似不好用-_-) 所以猜测应该是初始化* 失败后回调用的)*/// transaction 控制提交或回滚// CREATE TABLE IF NOT EXISTS 不存在就创建,存在就不创建this.db.transaction(function(tx) {tx.executeSql("CREATE TABLE IF NOT EXISTS T_TABLE (id, name, age, createDate)");});
},/*
* executeSql 提供了四个参数:
* 1.字符串的SQL语句 (必须)
* 2.对应SQL语句中的问号参数,使用[]传入 (不必须)
* 3.成功时的回调函数 函数中的返回参数分别是 (tx,results) (不必须)
* 4.失败时的回调函数 函数中的返回参数分别是 (tx,results) (不必须,results对象内
* 提供失败信息)
*/// 取表id最大的数据
async getMaxId(){const result = await new Promise((resolve) =>this.db.transaction(function(tx) {let id = 0;tx.executeSql("SELECT * FROM T_TABLE where id=(select max(id) FROM T_TABLE)",[], (tx, results) => {if(results.rows.length > 0){id = results.rows[0].id;}resolve(id + 1)});}));return result;
},// 添加数据
async handleAddSql(){const id = await this.getMaxId()const the = this;this.db.transaction(function(tx) {tx.executeSql("INSERT INTO T_TABLE (id, name, age, createDate) values (?, ?, ?, ?)",[id, the.sql.name, the.sql.age, '2022-02-28'],(tx, results) =>{console.log('追加成功')});});
},// 检索数据
this.db.transaction(function(tx) {tx.executeSql("SELECT * FROM T_TABLE", [], function(tx, results) {console.log('results =>',results.rows)});
});// 修改数据
handleUpdateSql(){const the = this;this.db.transaction(function(tx) {tx.executeSql("UPDATE T_TABLE set name = ? , age = ? where id = ?", [the.sql.name, the.sql.age, the.sql.id], (tx, results) => {console.log('修改成功')});})
},// 删除表
handleDropSql(){this.db.transaction(function(tx) {tx.executeSql("drop table T_TABLE", [], (tx, results) => {console.log('删除成功')});})
},}
控制台查看 webSQL
HTML5 Web SQL 数据库 讲解及使用相关推荐
- HTML5 Web SQL数据库
HTML5 Web SQL 数据库 Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs. 如果你是一个 We ...
- html日期写入数据库,javascript – 在HTML5 Web SQL数据库中对日期时间进行排序
我无法找到解决问题的方法. 我有一个HTML5 Web SQL数据库,其表格如下: db.transaction(function(tx) { tx.executeSql("CREATE T ...
- html5 多页面共享数据库,可以跨页面使用HTML5 Web SQL数据库吗?(Can HTML5 Web SQL databases be used across pages?)...
可以跨页面使用HTML5 Web SQL数据库吗?(Can HTML5 Web SQL databases be used across pages?) 这可能是一个非常简单的问题,请原谅我的无知,但 ...
- html中使用sql数据库,Web Sql数据库的使用详解|HTML5
HTML5中的Web Sql数据库在实际应用中并不是很多,本人只看到w3schools这种教学网才用到websql,目前也只有Webkit(Safari,SafariMobile和Chrome)和Op ...
- websql mysql_HTML5 Web SQL 数据库 | 菜鸟教程
Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs. 如果你是一个 Web 后端程序员,应该很容易理解 SQ ...
- 16.Web SQL数据库
1.Web SQL数据库 1.Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs. 2.核心方法 1.ope ...
- HTML5 Web SQL
Web Sql Database,中文翻译作"本地数据库",是随着HTML5规范加入的在浏览器端运行的轻量级数据库. 在HTML5中,大大丰富了客户端本地可以存储的内容,添加了很多 ...
- html5 indexeddb 排序,HTML5 IndexedDB,Web SQL数据库和浏览器大战
根据您在iOS上对Safari的要求,除了WebSQL之外别无选择 . 其他移动浏览器(如Opera和Opera)支持WebSQL黑莓 . 即使他们有IndexedDB,我也不认为他们会删除WebSQ ...
- web sql数据库存储位置
不同的浏览器存储的位置是不同的. 谷歌浏览器存储的位置是 C:\Users\你的电脑牌子英文名\AppData\Local\Google\Chrome\User Data\Default 例如: C: ...
最新文章
- hdu 4686 Arc of Dream
- java stream foreach_Java 8 Lambda Stream forEach具有多个语句
- 1.4信息系统基础-软件构件技术知识
- linux内核配置成qspi挂载,Zynq-Linux移植学习笔记之十-qspi驱动配置
- ## CSP 201409-1相邻数对(C语言)(100分)
- matlab动态图最新存储文件,MATLAB 动图绘制、保存
- 函数式编程之一柯里化
- 思科CCNA考试命令集总结
- Android开发笔记(一百八十三)利用HMS轻松扫描二维码
- 面对失败计算机科学家,面对巨大挫折,仍毫不畏惧、坚韧不拔的名人事例
- 撸了一个「合成大西瓜」
- 给迷茫的计算机系大学生的一封信 JAVA
- 回调函数与回调地狱及其解决方法 | JavaScript
- electron打包的一些问题
- Enterprise Library 4.1数据访问应用程序块快速入门【6】使用DataSet更新数据库
- LC117A泛海微马达驱动IC SOP-8
- 智慧校园信息化管理平台技术方案
- 张朝阳先生,您能不能踏实一点?
- 区分获取SM2、RSA类型证书的密钥长度、秘钥算法和签名算法值
- 如何远程访问/控制Mac机