SQL 必知必会
陈旸
清华大学计算机博士
73338 人已学习
新⼈⾸单¥68
登录后,你可以任选4讲全文学习
课程目录
已完结/共 50 讲
第一章:SQL语法基础篇 (19讲)
SQL 必知必会
15
15
1.0x
00:00/00:00
登录|注册

39丨WebSQL:如何在H5中存储一个本地数据库?

支持事务操作
支持存储大量数据
NoSQL方式
操作本地数据库
存在于Session会话中
持久化的本地存储
4KB存储限制
SQL执行:executeSql()
事务操作:transaction()
打开数据库:openDatabase()
IndexedDB
WebSQL
Session Storage
Local Storage
Cookies
IndexedDB
WebSQL
Session Storage
Local Storage
Cookies
三个核心方法
支持使用SQL对数据进行增删改查
操作本地数据库的网页API接口
区别
本地存储
WebSQL
WebSQL 与本地存储

该思维导图由 AI 生成,仅供参考

上一篇文章中,我们讲到了如何在 Excel 中使用 SQL 进行查询。在 Web 应用中,即使不通过后端语言与数据库进行操作,在 Web 前端中也可以使用 WebSQL。WebSQL 是一种操作本地数据库的网页 API 接口,通过它,我们就可以操作客户端的本地存储。
今天的课程主要包括以下几方面的内容:
本地存储都有哪些,什么是 WebSQL?
使用 WebSQL 的三个核心方法是什么?
如何使用 WebSQL 在本地浏览器中创建一个王者荣耀英雄数据库,并对它进行查询和页面的呈现?

本地存储都有哪些?什么是 WebSQL?

我刚才讲到了 WebSQL 实际上是本地存储。其实本地存储是个更大的概念,你现在可以打开 Chrome 浏览器,看下本地存储都包括了哪些。
Cookies 是最早的本地存储,是浏览器提供的功能,并且对服务器和 JS 开放,这意味着我们可以通过服务器端和客户端保存 Cookies。不过可以存储的数据总量大小只有 4KB,如果超过了这个限制就会忽略,没法进行保存。
Local Storage 与 Session Storage 都属于 Web Storage。Web Storage 和 Cookies 类似,区别在于它有更大容量的存储。其中 Local Storage 是持久化的本地存储,除非我们主动删除数据,否则会一直存储在本地。Session Storage 只存在于 Session 会话中,也就是说只有在同一个 Session 的页面才能使用,当 Session 会话结束后,数据也会自动释放掉。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文介绍了在HTML5中使用WebSQL进行本地数据库存储的方法。WebSQL是一种操作本地数据库的网页API接口,通过它可以方便地操作客户端的本地存储。文章首先介绍了本地存储的种类,包括Cookies、Local Storage、Session Storage、WebSQL和IndexedDB,以及它们的特点和区别。接着详细介绍了如何使用WebSQL,包括检测浏览器是否支持WebSQL、打开数据库、事务操作和SQL执行等核心方法。通过示例代码演示了如何创建数据库、创建数据表、插入数据等操作。文章还强调了WebSQL并不属于HTML5规范的一部分,但主流浏览器都支持WebSQL,可以在JavaScript脚本中使用WebSQL对客户端数据库进行操作。总的来说,WebSQL提供了一种便捷的方式来在Web前端中进行本地数据库存储和操作,为开发者提供了更多的选择和灵活性。 WebSQL的使用方法和示例代码清晰易懂,对于想要在浏览器中进行本地存储操作的开发者来说,是一篇很有参考价值的文章。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《SQL 必知必会》
新⼈⾸单¥68
立即购买
登录 后留言

全部留言(11)

  • 最新
  • 精选
  • Middleware
    ```php <body> <div class="content"> <label for="name"></label> <input id="name" type="text" name="name"> <input type="button" value="查询" onclick="query()"> </div> <script type="text/javascript"> if(!window.openDatabase) { alert('您的浏览器不支持 WebSQL'); } var db = openDatabase('wucai', '1.0', '王者荣耀数据库', 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS heros (id unique, name, hp_max, mp_max, role_main)'); tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10000, "夏侯惇", 7350, 1746, " 坦克 ")'); tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10001, "钟无艳", 7000, 1760, " 战士 ")'); tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10002, "张飞", 8341, 100, " 坦克 ")'); tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10003, "牛魔", 8476, 1926, " 坦克 ")'); tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10004, "吕布", 7344, 0, " 战士 ")'); msg = ' 数据表创建成功,一共插入 5 条数据'; console.log(msg); }); function query(){ var name = document.getElementById('name').value; var sql = 'SELECT * FROM heros where name like ?'; // 查询数据 db.transaction(function (tx) { tx.executeSql(sql, ['%'+name+'%'], function (tx, data) { var len = data.rows.length; console.log('查找到:' +len +'条记录'); console.log(data.rows); }); }); } </script> </body> ```

    作者回复: 赞下认真做作业的同学

    2019-09-02
    2
    11
  • ABC
    localForage这个库可以兼容处理IndexDB,localStorage,webSQL等

    作者回复: 这个不错,多谢分享

    2019-11-25
    2
    6
  • Middleware
    WebSQL 这项标准已经废弃了吧 https://dev.w3.org/html5/webdatabase/

    作者回复: 对 可以使用localForage

    2019-09-02
    6
  • 许童童
    WebSQL的功能确实很强大,但是在目前的项目中还没有用到过。

    作者回复: 嗯 多一个了解

    2019-09-02
    4
  • nimil
    这个功能厉害了

    作者回复: 嗯 虽然标准已经废弃了,不过在一些浏览器中还是可以使用

    2019-09-02
    2
    3
  • asdf100
    这两个都是长期有效,只能用户手动删除才可以的吗?

    作者回复: 除了在浏览器里手动删除以外,完全可以通过程序来控制本地的SQLite。 同样使用executeSql函数即可,在executeSql函数后面可以有两个function分别代表成功之后的调用,以及SQL执行失败的调用。比如想要删除本地SQLite的heros数据表,可以使用: tx.executeSql("DROP TABLE heros",[], function(tx, result) {alert('Drop 成功');}, function(tx, error) {alert('Drop 失败' + error.message);});

    2019-09-03
    2
    1
  • 雪飞鸿
    看了下文档IndexedDB虽然是NoSql,但也是基于事务来处理数据的。

    作者回复: 对的 IndexedDB有自己的事务处理机制

    2019-11-12
    3
  • RRR
    webSQL 已经被规范废弃,现在只支持 IndexDB。
    2020-06-15
    2
  • 博弈
    了解了浏览器端的五种存储方式:Cookie,Local storage,Session storage,WebSQL,IndexedDB
    2020-03-26
    2
  • victor666
    挺有意思的。可以拿来做SQL语句测试
    2020-03-22
    2
收起评论
显示
设置
留言
11
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部