1.  
  1. 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>
  1. sql.js
     1 // 1、创建访问数据库的对象
  2.  // 2、使用事务处理
  3.  var datatbale = null;
  4.  var db = openDatabase("Mydata","","My Database",1024*100);
  5.  /*
  6.      openDatabase(),作用打开数据，如果数据库不存在，则会创建一个新的数据库。
  7.      五个参数说明：数据库名称、版本号、描述文本、数据库大小、创建回调
  8.  */
  9.  function init() {
  10.      datatbale = document.getElementById("datatable");
  11.      showAllData();
  12.  }
  13.  //清除数据，保留表头
  14.  function removeAllData() {
  15.      for(var i = datatbale.childNodes.length -1; i>=0;i--){
  16.          datatbale.removeChild(datatbale.childNodes[i]);
  17.      }
  18.      var tr = document.createElement("tr");
  19.      var th1 = document.createElement("th");
  20.      var th2 = document.createElement("th");
  21.      var th3 = document.createElement("th");
  22.      th1.innerHTML = "姓名";
  23.      th2.innerHTML = "留言";
  24.      th3.innerHTML = "时间";
  25.      tr.appendChild(th1);
  26.      tr.appendChild(th2);
  27.      tr.appendChild(th3);
  28.      datatbale.appendChild(tr);
  29.  }
  30.  //显示数据
  31.  function showData(row) {
  32.      var tr = document.createElement("tr");
  33.      var td1 = document.createElement("td");
  34.      td1.innerHTML = row.name;
  35.      var td2 = document.createElement("td");
  36.      td2.innerHTML = row.message;
  37.      var td3 = document.createElement("td");
  38.      var t = new Date();
  39.      t.setTime(row.time);
  40.      td3.innerHTML = t.toLocaleDateString()+" "+ t.toLocaleTimeString();
  41.      tr.appendChild(td1);
  42.      tr.appendChild(td2);
  43.      tr.appendChild(td3);
  44.      datatbale.appendChild(tr);
  45.  }
  46.  //事件处理，先清除数据再利用for循环调用showData()函数显示所有数据
  47.  function showAllData() {
  48.      db.transaction(function (tx) {
  49.          tx.executeSql("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT,time INTEGER)",[]);
  50.          tx.executeSql("SELECT * FROM MsgData",[],function (tx,rs) {
  51.              removeAllData();
  52.              for(var i = 0;i<rs.rows.length;i++){
  53.                  showData(rs.rows.item(i));
  54.              }
  55.          })
  56.      })
  57.  }
  58.  //如何被调用？
  59.  function addData(name,message,time) {
  60.      /*
  61.      transaction()函数,用以处理事务：
  62.      包含事务内容的一个方法
  63.      执行成功回调函数（可选）
  64.      执行失败回调函数（可选）
  65.      */
  66.      db.transaction(function (tx) {
  67.          /*
  68.          executeSql()函数用以执行SQL语句，返回结果，方法有四个参数
  69.          1、查询字符串
  70.          2、用以替换查询字符串中问号的参数
  71.          3、执行成功回调函数（可选）
  72.          4、执行失败回调函数（可选）
  73.          */
  74.          tx.executeSql("INSERT INTO MsgData VALUES(?,?,?)",[name,message,time],function (tx,rs) {
  75.              alert("成功");
  76.          },
  77.              function (tx,erro) {
  78.                  alert(erro.source+"::"+erro.message);
  79.              }
  80.          )
  81.      })
  82.  }
  83.  //保存数据，并调用showAllData()函数显示所有数据
  84.  function saveData() {
  85.      var name = document.getElementById("name").value;
  86.      var memo = document.getElementById("memo").value;
  87.      var time = new Date().getTime();
  88.      addData(name,memo,time);
  89.      showAllData();
  90.  }

HTML5 — Wed SQL 本地数据库示例的更多相关文章

  1. （二）HTML5 - Web SQL 本地数据库

    简介 WEB SQL Database即本地的SQLite数据库,使用的方式和方法和SQLite基本相同 判断浏览器是否支持 if (!window.openDatabase) { alert('Da ...

  2. HTML5 Web SQL Database 数据库的使用方法【图文说明】

    页面代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  3. SQL 本地数据库

      先写一个数据库帮助器: public class MyDBHelper extends SQLiteOpenHelper { private static final String DB_NAME ...

  4. SQL Server 本地数据库登录不上 解决方法

    sql本地数据库登录不了的话.先看看自己计算机 服务 SQL server  (MSSQLSERVER)  没有打开的话,请打开. 今天说的情景模式是  你误删了windows登录:禁用了sa登录:s ...

  5. 与众不同 windows phone (7) - Local Database（本地数据库）

    原文:与众不同 windows phone (7) - Local Database(本地数据库) [索引页][源码下载] 与众不同 windows phone (7) - Local Databas ...

  6. HTML5中的本地、WebSql、离线应用存储

    1.   HTML5存储相关API a)   Localstorage 本地存储 b)   Web Sql DataBase 本地数据库存储 c)   .manifest 离线应用存储 2.   HT ...

  7. html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...

  8. HTML5教程之html 5 本地数据库（Web Sql Database）

    HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的.今天,我们一起来了解HTM ...

  9. 【HTML5】HTML5本地数据库（Web Sql Database）

    Web Sql数据库简介 Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库. Web SQL数据库的浏览器支持情况 Web SQL 数 ...

随机推荐

  1. centos生成公钥私钥 securecrt通过公钥访问服务器 winscp通过公钥访问服务器

    忙碌了一下午,一直到写博客现在.都在纠结阿里云服务器上配置公钥私钥,网上的说辞总是参差不齐,需要各个去综合,合理取舍.今天终于配置好了. 我就不说这种方式的重要性了,往往黑客都不需要你的登陆账户密码就 ...

  2. Vijos 1040 高精度乘法

    描述 高精度乘法 输入:两行,每行表示一个非负整数(不超过10000位) 输出:两数的乘积. 样例1 样例输入1 99 101 样例输出1 9999 题解 这道题和之前的Vijos 1010 清帝之惑 ...

  3. java后端程序员1年工作经验总结

    java后端1年经验和技术总结(1) 1.引言 毕业已经一年有余,这一年里特别感谢技术管理人员的器重,以及同事的帮忙,学到了不少东西.这一年里走过一些弯路,也碰到一些难题,也受到过做为一名开发却经常为 ...

  4. shell十分钟教程

    1.先介绍下shell的工作原理 Shell可以被称作是脚本语言,因为它本身是不需要编译的,而是通过解释器解释之后再编译执行,和传统语言相比多了解释的过程所以效率会略差于传统的直接编译的语言. 但是s ...

  5. 深入 HTML5 Web Worker 应用实践：多线程编程

    深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越 ...

  6. flume 1.7在windows下的安装与测试

    一.安装 安装java,配置环境变量. 安装flume,下载地址,下载后直接解压即可. 二.运行 创建配置文件:在解压后的文件 apache-flume-1.7.0-bin\conf下创建一个exam ...

  7. JavaWeb开发技术基础概念回顾篇

    JavaWeb开发技术基础概念回顾篇 第一章 动态网页开发技术概述 1.JSP技术:JSP是Java Server Page的缩写,指的是基于Java服务器端动态网页. 2.JSP的运行原理:当用户第 ...

  8. informatica 学习总结

    问:什么是BI? 答:BI是商务智能,它包含的应用系统和技术较宽泛,通过收集,存储,分析和提供对数据的访问,来帮助企业用户做出更好的商务决策. BI应用包括决策支持,查询和报表,联机分析处理OLAP, ...

  9. html中ul元素水平排列问题

    <!DOCTYPE html> <html> <head> <style> #pic_list { display:block; white-space ...

  10. hive配置过程中出现的一个问题

    执行hive里面的insert语句的时候,报错,执行失败查看hadoop的日志文件之后发现错误的详细信息如下: 把hdfs-site.xml中的hadoop.tmp.dir这个属性添加到core-si ...