39丨WebSQL：如何在H5中存储一个本地数据库？
该思维导图由 AI 生成，仅供参考
本地存储都有哪些？什么是 WebSQL？
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
本文介绍了在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-02211
ABClocalForage这个库可以兼容处理IndexDB,localStorage,webSQL等作者回复: 这个不错，多谢分享
2019-11-2526- MiddlewareWebSQL 这项标准已经废弃了吧 https://dev.w3.org/html5/webdatabase/
作者回复: 对 可以使用localForage
2019-09-026 
许童童WebSQL的功能确实很强大，但是在目前的项目中还没有用到过。作者回复: 嗯 多一个了解
2019-09-024
nimil这个功能厉害了作者回复: 嗯 虽然标准已经废弃了，不过在一些浏览器中还是可以使用
2019-09-0223
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-0321
雪飞鸿看了下文档IndexedDB虽然是NoSql，但也是基于事务来处理数据的。作者回复: 对的 IndexedDB有自己的事务处理机制
2019-11-123
RRRwebSQL 已经被规范废弃，现在只支持 IndexDB。2020-06-152- 博弈了解了浏览器端的五种存储方式：Cookie,Local storage,Session storage,WebSQL,IndexedDB2020-03-262
victor666挺有意思的。可以拿来做SQL语句测试2020-03-222
