这个是需要使用后台语言去操作的，然后通过ajax往前端页面传数据的！
网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了卧龙免费建站欢迎大家使用！
php
asp点虐
java等都可以
在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连数据库
连接方法如下：
1.建立一个web项目
2.把数据库驱动复制到lib目录下。数据库驱动有：mysql，sqlserver，oracle等 是什么样类型的数据导入相应驱动。
3.编写一个连接数据库的工具类，获取一个连接。下面以mysql数据库为例。
核心代码：
public class DataUtils {
/**
* 从数据中获取一个连接
* @return
*/
public static Connection getConn(){
Connection conn = null;
try {
Class.forName("com.mysql.jdbc.Driver").newInstance();
//表为test，用户名root，密码admin。
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "admin");
} catch (Exception e) {
e.printStackTrace();
}
return conn;
}
}
4.获取到与相应数据库的连接后，就可以做增删改查操作了。记得做完操作后，关闭连接，释放资源。