HTML纯前端使用的数据库
时间：2023-2-24 15:59 作者：Anglei 分类： 数据库
直接上源码！！
<html>
<head>
<meta charset="utf-8">
<script>
var 数据表 = null;
//4个参数分别是 数据库名,版本号，数据库的描述，数据库大小
var 数据库 = openDatabase('MyData','1.0版','我的数据库描述',102400);
//初始化页面()方法，用于页面下方表格元素的引用，并且显示所有的数据库记录
function 初始化页面(){
//取得下方的表格元素，并且赋值给全局变量
数据表 = document.getElementById("数据表");
显示当前数据库当前表格中的所有数据();
}//清除页面表格中的所有数据()方法，用于移除所有的表格中的当前显示数据（它并不去除数据库记录）
function 清除页面表格中的所有数据(){
//首先，它将<table>下面的所有子元素全部清除
//所以，这里它对于数据表组件进行遍历
for(var i=数据表.childNodes.length-1;i>=0;i--){
数据表.removeChild(数据表.childNodes[i]);
}
//全部去除之后，现在需要显示这个表头部分<tr>里面有多个<th>
//创建表头行到文档树中
var 表头的一行= document.createElement('tr');
//表头行的第一个表头
var 第一个表头=document.createElement('th');
//表头行的第二个表头
var 第二个表头=document.createElement('th');
//表头行的第三个表头
var 第三个表头=document.createElement('th');
//设置这3个表头的文本
第一个表头.innerHTML="姓名";
第二个表头.innerHTML="资料";
第三个表头.innerHTML="时间";
//将这些表头依次放在表头行中
表头的一行.appendChild(第一个表头);
表头的一行.appendChild(第二个表头);
表头的一行.appendChild(第三个表头);
//将这个新创建的表头行挂到表格中
数据表.appendChild(表头的一行);
}
//构建指定数据库行的数据对应的HTML文本。传入参数：数据库结果集中的某一行记录
function 显示数据(数据行){
//构建一个表行用于取得当前所要的信息
var 表格数据的一行= document.createElement('tr');
//创建第一列，这一列是姓名
var 第一个数据=document.createElement('td');
//填充第一列的信息为该行的姓名
第一个数据.innerHTML=数据行.姓名;
//创建第二列，这一列是留言
var 第二个数据=document.createElement('td');
//填充第一列的信息为该行的message
第二个数据.innerHTML=数据行.信息;
//创建第三列，这一列是日期
var 第三个数据=document.createElement('td');
//创建一个日期对象
var 日期 = new Date();
日期.setTime(数据行.时间);
//将日期的标准形式和国际化日期形式分别设置给当前列
第三个数据.innerHTML=日期.toLocaleString()+" "+日期.toLocaleTimeString();
//吧这三列挂到当前行中
表格数据的一行.appendChild(第一个数据);
表格数据的一行.appendChild(第二个数据);
表格数据的一行.appendChild(第三个数据);
//让这个表格在后面加上这一行
数据表.appendChild(表格数据的一行);
}
//这个函数用于显示所有的行到表格中，这些行是从数据库中拿出来的
function 显示当前数据库当前表格中的所有数据(){
//开启SQLite数据库事务,它用一个回调函数作为参数表明要执行的语句
数据库.transaction(function(数据库事务){
//首先它创建一个数据库表，里面有3个字段
数据库事务.executeSql('CREATE TABLE IF NOT EXISTS 我的数据(姓名,信息,时间)',[]);
//创建一个查询语句用来查询数据库表的所有记录（这个由于是所有查询，所以不需要预编译语句和参数 (第二个参数)）
//然后定义了一个回调函数，表明对于结果集的处理
数据库事务.executeSql('SELECT * FROM 我的数据',[],function(数据库事务,查询结果集){
//对于结果集，首先，在获取它之前移除页面上的<table>的所有数据
清除页面表格中的所有数据();
//遍历结果集，对于每一行，依次调用显示数据来在table上创建对于的html文本
for(var i=0;i<查询结果集.rows.length;i++){
//对于item(i)，也就是某一行记录，我们显示其内容到页面的表格中（构建对应的HTML片断）
显示数据(查询结果集.rows.item(i));
}
});
}
);
}
//这个函数用于添加一条记录到数据库中，这些信息有些是从页面获得的，有些是系统生成的。
function 添加数据(姓名,信息,时间){
//开启一个数据库事务
//回调函数是一个有参数的插入语句，可以看到我们插入到表我的数据中，插入的内容也就是参数传递进来的内容
数据库.transaction(function(数据库事务){
//插入的语句是个模板语句
//插入成功的回调就是在控制台上输入一行日志
数据库事务.executeSql('INSERT INTO 我的数据 VALUES(?,?,?)' , [姓名,信息,时间],function(数据库事务,查询结果集){
console.log("成功保存数据!");
},
//插入失败的回调就是在控制台上输入一行错误日志
function(数据库事务,error){
console.log(error.source+"::"+error.message);
});
}
);
}
//保存用户的当前输入，这个是作为点击页面上”保存“按钮的事件处理函数
function 保存数据到数据库中(){
//从HTML页面中取得2个输入框的文本
var 姓名=document.getElementById('姓名').value;
var 信息=document.getElementById('信息').value;
//得到当前的系统时间
var 时间= new Date().getTime();
//将用户名，用户信息，当前时间存到数据库中
添加数据(姓名,信息,时间);
显示当前数据库当前表格中的所有数据();
}
</script>
</head>
<body onload="初始化页面();">
<h1>使用HTML5本地数据库DEMO</h1>
<table>
<tr><td>姓名：</td><td><input type="text" id="姓名"></td></tr>
<tr><td>资料：</td><td><input type="text" id="信息"></td></tr>
<tr>
<td></td>
<td><input type="button" value="保存" onclick="保存数据到数据库中();"></td>
</tr>
</table>
<hr>
<table id="数据表" border="1"></table>
</body>本文完结，相关标签: 前端DB
推荐阅读：
 路过(0) |
 雷人(0) |
 握手(0) |
 鲜花(0) |
 鸡蛋(0) |