HTML5其实挺方便的，能帮你快点搞定SQL数据库创建这事儿

HTML5其实挺方便的,能帮你快点搞定SQL数据库创建这事儿，这话可不是我瞎说的，是很多在实际做网页和App开发的程序员们总结出来的经验，以前一想到要弄个数据库，脑袋都大，得装专门的数据库软件，比如MySQL或者PostgreSQL，然后还得配置服务器，写一大堆复杂的SQL命令来建表，光是环境搭建就能劝退不少人，但现在不一样了，HTML5里带了一个叫Web SQL Database的技术，虽然它现在不被推荐为未来的标准了，但很多浏览器还支持，而且对于做点小项目、原型或者移动端的离线应用来说，它真的特别省事，更现代一点的IndexedDB也能干类似的事，只是用法不太一样，咱们今天就主要聊聊这个Web SQL Database，因为它用着很像传统的SQL，理解起来快。

为啥说它方便呢？最直接的一点就是，你不需要单独安装和运行一个数据库服务器，数据库文件就直接存在用户的浏览器里，比如你想做个记事本网站，或者一个简单的任务管理器，用户打开你的网页，数据库就在后台默默创建好了，数据也存他自个儿的电脑上，这对开发阶段来说，效率提升太多了，你不需要去搞什么云数据库账号，也不用担心本地测试环境的配置，一个浏览器就全搞定了。

那具体怎么用呢？其实核心就是用到JavaScript，HTML5本身是标记语言，干活儿的是它背后的JavaScript，浏览器提供了一个叫openDatabase的方法，你写几行JS代码，就能创建一个数据库，比如说，你可以这样写：

var db = openDatabase('myTodoList', '1.0', '我的待办事项数据库', 2 * 1024 * 1024);

这句代码是啥意思呢？简单解释一下：它想创建一个名字叫myTodoList的数据库，版本是1.0，后面是个描述，说这是“我的待办事项数据库”，最后指定这个数据库最大能占2兆字节的存储空间，你看，一句代码，数据库就创建好了，是不是比想象中简单？这个db变量就成了你后面操作这个数据库的入口。

数据库建好了,里面是空的，得建表才能存数据吧？建表就得用到SQL语句了，幸好，Web SQL Database用的SQL语法和咱们平时用的SQLite很像，很容易上手，我想建一张表来存待办事项，可以执行这样一段SQL：

CREATE TABLE IF NOT EXISTS todos (id INTEGER PRIMARY KEY AUTOINCREMENT, task TEXT NOT NULL, completed BOOLEAN NOT NULL DEFAULT 0)

这句话是说,如果还没有叫todos的表，那就创建一张，表里有三个字段：一个自动增长的id作为主键，一个不能为空的task字段存任务内容，还有一个completed字段表示任务是否完成，默认是0（没完成），这种SQL语句，如果你之前接触过一点数据库，看起来应该很亲切。

那怎么执行这个建表语句呢？这就要用到数据库的事务（transaction）了，听上去有点专业，但其实就是一个保证数据库操作能安全完成的机制，你可以这样写：

db.transaction(function(tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS todos (id INTEGER PRIMARY KEY AUTOINCREMENT, task TEXT NOT NULL, completed BOOLEAN NOT NULL DEFAULT 0)'); });

你看,把SQL语句放在tx.executeSql里面就行了，这个tx是事务对象，通过事务，你不仅可以建表，后面增删改查数据也都靠它。

说到增删改查,这也就是后续的事情了，比如你想添加一条新任务，就可以用INSERT INTO语句；想查询所有未完成的任务，就用SELECT * FROM todos WHERE completed=0，所有这些操作都是用JavaScript调用executeSql方法来完成的，这意味着，你整个应用的数据层逻辑，用JS就能全部写完，前端和后端的界限在简单应用里变得很模糊，开发速度自然就上去了。

Web SQL Database有它的局限性，最大的问题就是它不是所有浏览器都完全一致支持，而且W3C已经不再维护这个规范，转向了IndexedDB，IndexedDB更像一个No数据库，用键值对存储，学习曲线可能会陡一点，但对于快速原型开发、离线优先的PWA（渐进式Web应用）、或者浏览器扩展插件这类项目，Web SQL的简单直接仍然是很有吸引力的。

还有一点很重要的是,因为数据库在客户端，所以你得考虑数据持久性的问题，用户清除了浏览器数据，你的数据库就没了，所以它不适合存非常关键、不能丢失的数据，而是更适合存用户的个性化设置、缓存、或者离线操作时的临时数据。

HTML5提供的这种在浏览器里操作SQL数据库的能力,确实大大简化了小规模数据存储功能的开发流程，它把原本需要后端服务器和复杂配置的事情，变成了前端开发者用几行JavaScript代码就能搞定的问题，这对于独立开发者、初学者或者需要快速验证想法的小团队来说，无疑是一个巨大的便利，虽然它不是万能的，但在合适的场景下，绝对能帮你快点搞定SQL数据库创建这事儿，让你能更专注于应用本身的逻辑和用户体验。