HTML能不能和数据库连接？

非常狭义地说，前端在网络协议层面就不能直接「连接」到数据库。因为 JS 默认发出的请求走的都是应用层的 HTTP 协议，并非与常见数据库交互时所需的长连接。此时的通信协议一般是各家数据库厂商在 TCP/UDP 之上自己约定的（比如默认 MySQL 连 3306 端口走 MySQL 的协议 ，MongoDB 连 27017 端口然后走它的 Wire Protocol ）。虽然不同数据库之间有 ODBC 这样的标准能让你兼容地连上它们然后无脑 SQL，但这类协议的实现也并非建立在 HTTP 或 WebSocket 之上，不是前端直接发网络请求

就能连上的东西。

当然这种理解比较片面。因为你在技术上也完全可以直接在前端生成

SQL，靠一层非常薄的后端服务「代理」转发给数据库执行。这也就是很多其他回答里的「SQL over

HTTP」式方案。容易看出，这种做法在安全性和性能上都有先天的不足，不属于现在互联网行业显学的主流（F12 警告，注入警告，大并发警告）。

但除了直接在前端拼 SQL 之外，还有没有更广义一点的「前端连接数据库」方式呢？个人觉得其实还是有的。比如为了尽可能易用，数据库本身的 API 都可以直接做成 REST 的形式方便前端一把梭，例子就是很方便做小应用的 CouchDB。再广义一点，如果把 GraphQL 当作「更好的 SQL 格式」，那么只要你能和 GraphQL 服务端通信，是不是也算直接连上了数据库呢？这时候也已经有 Hasura

这样的项目能帮你把 GraphQL 查询直接映射到 PostgreSQL 等数据库上，这时它在概念上就像一种更方便的跨数据库 driver

方便你来增查改删，这个饼感觉还是能画得很大的。毕竟按传统的互联网味技术栈，一个业务概念需要在数据库里、后端业务逻辑和前端业务逻辑里各定义一遍，中途太多胶水可以节约了，肯定是一步到胃最舒服啊。

在HTML5之前的时代，如果需要在客户端本地保存数据，只能存储在Cookie中，但是 Cookie使用过多会影响请求速度 ，所以并不适合存储大量数据。

而在HTML5面世后，自带了本地存储和本地数据库功能，更为便捷的管理客户端数据。

HTML5提供了一个 基于浏览器端的数据库 （WebSQL 、IndexedDB），我们可以通过JS API来在浏览器端创建一个本地数据库，而且它还支持标准的SQL来执行CRUD *** 作。

如何查看本地的数据库呢？通过各个 浏览器的调试工具 可以查看。

在HTML5中 *** 作本地数据库都是通过JS API来实现的，很简单，步聚如下：

1、通过 openDatabase 创建数据库对象

2、通过 db.transaction 设置回调函数

3、通过 executeSql 方法执行查询

HTML5默认情况下是无法连接远程数据库的，一般都是通过API去 *** 作数据库。比如当下流行的前后端完全分离，借助的就是RESTful来实现业务数据的CRUD *** 作。

怎么会问这个问题，HTML是不可能链接数据库的，他是标签类语言，是用于构建静态页面的，要想链接数据库必须得支持网络通信和IO的，显然HTML并没有支持，HTML只是用来设计页面的。

我还以为我落伍了，h5连数据库

HTML5连接数据库分为以下几步：

预备知识：Web SQL Database，Html5环境下可以用Js执行CRUD的Web数据库组件。

核心方法如下：

1、openDatabase：这个方法使用现有数据库或创建新数据库创建数据库对象。

2、transaction：这个方法允许我们根据情况控制事务提交或回滚。

3、executeSql：这个方法用于执行真实的SQL查询。

第一步：打开连接并创建数据库

var dataBase = openDatabase("student", "1.0", "student", 1024 * 1024, function () { })

if (!dataBase) {

alert("数据库创建失败！")

} else {

alert("数据库创建成功！")

}

第二步：创建数据表

this.createTable=function() {

dataBase.transaction( function(tx) {

tx.executeSql(

"create table if not exists stu (id REAL UNIQUE, name TEXT)",

[],

function(tx,result){ alert('创建stu表成功')},

function(tx, error){ alert('创建stu表失败:' + error.message)

})

})

}

第三步：执行增删改查

添加数据：

this.insert = function () {

dataBase.transaction(function (tx) {

tx.executeSql(

"insert into stu (id, name) values(?, ?)",

[id, '徐明祥'],

function () { alert('添加数据成功')},

function (tx, error) { alert('添加数据失败: ' + error.message)

} )

})

---