纯前端使用前端数据库。
案例1
<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>案例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
openDatabase与android里面的sqlite差不多
最好的选型存储
-->
<h1>opendatabse数据库操作</h1>
<button id="btn-create">创建user数据表</button>
<button id="btn-insert">插入数据</button>
<button id="btn-query">查询数据</button>
<button id="btn-update">修改数据</button>
<button id="btn-delete">删除数据</button>
<button id="btn-drop">删除user数据表</button>
<script type="text/javascript">
let findId = id => document.getElementById(id);
//模拟一条user数据
let user = {
username: "liuqiang",
password: "123569874",
info: "beaconApp开发团队中一员"
};
/**
* 创建数据库 或者此数据库已经存在 那么就是打开数据库
* name: 数据库名称
* version: 版本号
* displayName: 对数据库的描述
* estimatedSize: 设置数据的大小
* creationCallback: 回调函数(可省略)
*/
let db = openDatabase("MySql", "1.0", "我的数据库描述", 1024 * 1024);
let result = db ? "数据库创建成功" : "数据库创建失败";
console.log(result);
const USER_TABLE_SQL = "create table if not exists userTable (id integer primary key autoincrement,username varchar(12)," +
"password varchar(16),info text)";
//创建数据表
function createTable() {
db.transaction(tx => {
tx.executeSql(USER_TABLE_SQL, [],
(tx, result) => {
alert('创建user表成功:' + result);
}, (tx, error) => {
alert('创建user表失败:' + error.message);
})
})
}
const INSERT_USER_SQL = "insert into userTable (username, password,info) values(?,?,?)";
//插入数据
function insertData(user) {
db.transaction(tx => {
tx.executeSql(INSERT_USER_SQL,
[user.username, user.password, user.info],
(tx, result) => {
alert('添加数据成功:');
}, (tx, error) => {
alert('添加数据失败:' + error.message);
})
})
}
const QUERY_USER_SQL = "select * from userTable";
//查询数据
function queryData() {
db.transaction(tx => {
tx.executeSql(QUERY_USER_SQL, [],
(tx, result) => {
console.log(result);
},
(tx, error) => {
console.log('查询失败: ' + error.message)
})
})
}
const UPDATE_USER_SQL = "update userTable set password = ? where username = ?";
//修改数据
function updateData(user) {
db.transaction(tx => {
tx.executeSql(UPDATE_USER_SQL, [user.password, user.username],
(tx, result) => {
alert("修改数据成功")
}, (tx, error) => {
alert("修改数据失败:" + error.message)
})
})
}
const DELETE_USER_SQL = "delete from userTable where username = ?";
//删除数据
function deleteData(user) {
db.transaction(tx => {
tx.executeSql(DELETE_USER_SQL, [user.username],
(transaction, resultSet) => {
alert("删除数据成功")
}, (transaction, error) => {
alert("删除数据失败:" + error.message)
})
});
}
const DROP_USER_SQL = "drop table userTable";
//删除数据表
function dropTable() {
db.transaction(tx => {
tx.executeSql(DROP_USER_SQL, [],
(transaction, resultSet) => {
alert("删除数据表成功")
}, (transaction, error) => {
alert("删除数据表失败:" + error.message)
})
})
}
/**
* 点击事件 增删查改
*/
let btnCreate = findId("btn-create");
let btnInsert = findId("btn-insert");
let btnQuery = findId("btn-query");
let btnUpdate = findId("btn-update");
let btnDelete = findId("btn-delete");
let btnDrop = findId("btn-drop");
btnCreate.onclick = () => createTable();
btnInsert.onclick = () => insertData(user);
btnQuery.onclick = () => queryData();
btnUpdate.onclick = () => {
user.password = "111666666"; //修改密码
updateData(user);
};
btnDelete.onclick = () => deleteData(user);
btnDrop.onclick = () => dropTable();
</script>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
