HTML5 — Wed SQL 本地数据库示例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="sql.js"></script>
7 </head>
8 <!--打开网页即调用init()函数,显示已存数据-->
9 <body onload="init()">
10 <table>
11 <tr><td>姓名:</td><td><input type="text" id="name"></td></tr>
12 <tr><td>留言:</td><td><input type="text" id="memo"></td></tr>
13 <tr>
14 <td></td>
15 <!--事件触发-->
16 <td><input type="button" value="保存" onclick="saveData()"></td>
17 </tr>
18 </table>
19 <hr>
20 <table id="datatable" border="1">
21 <p id="msg"></p>
22 </table>
23 </body>
34 </html>
sql.js
1 // 1、创建访问数据库的对象
// 2、使用事务处理
var datatbale = null;
var db = openDatabase("Mydata","","My Database",1024*100);
/*
openDatabase(),作用打开数据,如果数据库不存在,则会创建一个新的数据库。
五个参数说明:数据库名称、版本号、描述文本、数据库大小、创建回调
*/
function init() {
datatbale = document.getElementById("datatable");
showAllData();
}
//清除数据,保留表头
function removeAllData() {
for(var i = datatbale.childNodes.length -1; i>=0;i--){
datatbale.removeChild(datatbale.childNodes[i]);
}
var tr = document.createElement("tr");
var th1 = document.createElement("th");
var th2 = document.createElement("th");
var th3 = document.createElement("th");
th1.innerHTML = "姓名";
th2.innerHTML = "留言";
th3.innerHTML = "时间";
tr.appendChild(th1);
tr.appendChild(th2);
tr.appendChild(th3);
datatbale.appendChild(tr);
}
//显示数据
function showData(row) {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML = row.name;
var td2 = document.createElement("td");
td2.innerHTML = row.message;
var td3 = document.createElement("td");
var t = new Date();
t.setTime(row.time);
td3.innerHTML = t.toLocaleDateString()+" "+ t.toLocaleTimeString();
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
datatbale.appendChild(tr);
}
//事件处理,先清除数据再利用for循环调用showData()函数显示所有数据
function showAllData() {
db.transaction(function (tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT,time INTEGER)",[]);
tx.executeSql("SELECT * FROM MsgData",[],function (tx,rs) {
removeAllData();
for(var i = 0;i<rs.rows.length;i++){
showData(rs.rows.item(i));
}
})
})
}
//如何被调用?
function addData(name,message,time) {
/*
transaction()函数,用以处理事务:
包含事务内容的一个方法
执行成功回调函数(可选)
执行失败回调函数(可选)
*/
db.transaction(function (tx) {
/*
executeSql()函数用以执行SQL语句,返回结果,方法有四个参数
1、查询字符串
2、用以替换查询字符串中问号的参数
3、执行成功回调函数(可选)
4、执行失败回调函数(可选)
*/
tx.executeSql("INSERT INTO MsgData VALUES(?,?,?)",[name,message,time],function (tx,rs) {
alert("成功");
},
function (tx,erro) {
alert(erro.source+"::"+erro.message);
}
)
})
}
//保存数据,并调用showAllData()函数显示所有数据
function saveData() {
var name = document.getElementById("name").value;
var memo = document.getElementById("memo").value;
var time = new Date().getTime();
addData(name,memo,time);
showAllData();
}
HTML5 — Wed SQL 本地数据库示例的更多相关文章
- (二)HTML5 - Web SQL 本地数据库
简介 WEB SQL Database即本地的SQLite数据库,使用的方式和方法和SQLite基本相同 判断浏览器是否支持 if (!window.openDatabase) { alert('Da ...
- HTML5 Web SQL Database 数据库的使用方法【图文说明】
页面代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- SQL 本地数据库
先写一个数据库帮助器: public class MyDBHelper extends SQLiteOpenHelper { private static final String DB_NAME ...
- SQL Server 本地数据库登录不上 解决方法
sql本地数据库登录不了的话.先看看自己计算机 服务 SQL server (MSSQLSERVER) 没有打开的话,请打开. 今天说的情景模式是 你误删了windows登录:禁用了sa登录:s ...
- 与众不同 windows phone (7) - Local Database(本地数据库)
原文:与众不同 windows phone (7) - Local Database(本地数据库) [索引页][源码下载] 与众不同 windows phone (7) - Local Databas ...
- HTML5中的本地、WebSql、离线应用存储
1. HTML5存储相关API a) Localstorage 本地存储 b) Web Sql DataBase 本地数据库存储 c) .manifest 离线应用存储 2. HT ...
- html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...
- HTML5教程之html 5 本地数据库(Web Sql Database)
HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的.今天,我们一起来了解HTM ...
- 【HTML5】HTML5本地数据库(Web Sql Database)
Web Sql数据库简介 Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库. Web SQL数据库的浏览器支持情况 Web SQL 数 ...
随机推荐
- win 结束占用端口的进程
在web开发的时候,经常开启http服务器监听某个端口,例如npm run dev等等 以下介绍通过命令行结束占用端口的程序(注:测试环境为win10) 1.启动命令行 2.在命令行输入 netsta ...
- Spring (3.2.4) 常用jar 包解析
Spring (3.2.4) 常用jar 包解析 基本jar包 spring-aop-3.2.4.RELEASE.jar spring-aspects-3.2.4.RELEASE.jar spring ...
- Linux进程/内核模型
内核必须实现一组服务和相应的接口,应用程序则可以使用这些接口,而不是直接与硬件打交道. Linux内核主要由以下5个子系统组成:进程调度.内存管理.虚拟文件系统.进程间通信以及设备驱动. 在这个组成中 ...
- Apache+Tomcat实现动静分离
完成Tomcat集群搭建后,我们只需修改两.三处即可实现动静分离. 1.将原来httpd.conf中JkMount的路由规则都放入conf/extra/httpd-urimap.conf中: /*=l ...
- gulp使用流程
1.全局安装gulp $ npm install --global gulp 2.作为项目的开发依赖(devDependencies)安装 $ npm install --save-dev gulp ...
- [jbdj]SpringMVC框架(1)快速入门
1)springmvc快速入门(传统版) 步一:创建springmvc_demo一个web应用 步二:导入springioc,springweb , springmvc相关的jar包 步三:在/WEB ...
- 大数据平台搭建-kafka集群的搭建
本系列文章主要阐述大数据计算平台相关框架的搭建,包括如下内容: 基础环境安装 zookeeper集群的搭建 kafka集群的搭建 hadoop/hbase集群的搭建 spark集群的搭建 flink集 ...
- Redis 错误1067:进程意外终止,Redis不能启动,Redis启动不了
Redis 错误1067:进程意外终止,Redis不能启动,Redis启动不了 >>>>>>>>>>>>>>> ...
- HDU 1728 逃离迷宫(DFS)
题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=1728 题目: 逃离迷宫 Time Limit: 1000/1000 MS (Java/Others) ...
- webstrom一键上传github及使用
对于webstrom是我参加it修真园时就推荐使用的,其他编辑器我也没什么使用过.读大学的时候还是比较喜欢 Notepad++. 现在说一下webstrom主要的关键点吧! 一.实现一键上传githu ...