好吧，其实是抄来的

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title>HTML5本地存储之本地数据库篇</title>
  6.     <style>
  7.         .addDiv{
  8.             border: 2px dashed #ccc;
  9.             width:400px;
  10.             text-align:center;
  11.         }
  12.  
  13.         th {
  14.             font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  15.             color: #4f6b72;
  16.             border-right: 1px solid #C1DAD7;
  17.             border-bottom: 1px solid #C1DAD7;
  18.             border-top: 1px solid #C1DAD7;
  19.             letter-spacing: 2px;
  20.             text-transform: uppercase;
  21.             text-align: left;
  22.             padding: 6px 6px 6px 12px;
  23.         }
  24.         td {
  25.             border-right: 1px solid #C9DAD7;
  26.             border-bottom: 1px solid #C9DAD7;
  27.             background: #fff;
  28.             padding: 6px 6px 6px 12px;
  29.             color: #4f6b72;
  30.         }
  31.     </style>
  32. </head>
  33. <body onload="loadAll()">
  34.     <div class="addDiv">
  35.         <label for="user_name">姓名：</label>
  36.         <input type="text" id="user_name" name="user_name" class="text"/>
  37.         <br/>
  38.         <label for="mobilephone">手机：</label>
  39.         <input type="text" id="mobilephone" name="mobilephone"/>
  40.         <br/>
  41.         <label for="mobilephone">公司：</label>
  42.         <input type="text" id="company" name="company"/>
  43.         <br/>
  44.         <input type="button" onclick="save()" value="新增记录"/>
  45.     </div>
  46.     <br/>
  47.     <div id="list">
  48.     </div>
  49. </body>
  50.  
  51. <script language="javascript">
  52.         //打开数据库
  53.         var db = openDatabase('contactdb','','local database demo',204800);
  54.  
  55.         //保存数据
  56.         function save(){
  57.             var user_name = document.getElementById("user_name").value;
  58.             var mobilephone = document.getElementById("mobilephone").value;
  59.             var company = document.getElementById("company").value;
  60.             //创建时间
  61.             var time = new Date().getTime();
  62.             db.transaction(function(tx){
  63.                 tx.executeSql('insert into contact values(?,?,?,?)',[user_name,mobilephone,company,time],onSuccess,onError);
  64.             });
  65.         }
  66.          //sql语句执行成功后执行的回调函数
  67.         function onSuccess(tx,rs){
  68.             alert("操作成功");
  69.             loadAll();
  70.         }
  71.         //sql语句执行失败后执行的回调函数
  72.         function onError(tx,error){
  73.             alert("操作失败，失败信息："+ error.message);
  74.         }
  75.  
  76.                 //将所有存储在sqlLite数据库中的联系人全部取出来
  77.         function loadAll(){
  78.             var list = document.getElementById("list");
  79.             db.transaction(function(tx){
  80.                 //如果数据表不存在，则创建数据表
  81.                 tx.executeSql('create table if not exists contact(name text,phone text,company text,createtime INTEGER)',[]);
  82.                 //查询所有联系人记录
  83.                 tx.executeSql('select * from contact',[],function(tx,rs){
  84.                    if(rs.rows.length>0){
  85.                         var result = "<table>";
  86.                         result += "<tr><th>序号</th><th>姓名</th><th>手机</th><th>公司</th><th>添加时间</th><th>操作</th></tr>";
  87.                         for(var i=0;i<rs.rows.length;i++){
  88.                             var row = rs.rows.item(i);
  89.                             //转换时间，并格式化输出
  90.                             var time = new Date();
  91.                             time.setTime(row.createtime);
  92.                             var timeStr = time.format("yyyy-MM-dd hh:mm:ss");
  93.                             //拼装一个表格的行节点
  94.                             result += "<tr><td>"+(i+1)+"</td><td>"+row.name+"</td><td>"+row.phone+"</td><td>"+row.company+"</td><td>"+timeStr+"</td><td><input type='button' value='删除' onclick='del("+row.phone+")'/></td></tr>";
  95.                         }
  96.                         list.innerHTML = result;
  97.                    }else{
  98.                         list.innerHTML = "目前数据为空，赶紧开始加入联系人吧";
  99.                    }
  100.                 });
  101.             });
  102.         }
  103.  
  104.         Date.prototype.format = function(format)
  105.         {
  106.             var o = {
  107.             "M+" : this.getMonth()+1, //month
  108.             "d+" : this.getDate(),    //day
  109.             "h+" : this.getHours(),   //hour
  110.             "m+" : this.getMinutes(), //minute
  111.             "s+" : this.getSeconds(), //second
  112.             "q+" : Math.floor((this.getMonth()+3)/3),  //quarter
  113.             "S" : this.getMilliseconds() //millisecond
  114.             }
  115.             if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
  116.             (this.getFullYear()+"").substr(4 - RegExp.$1.length));
  117.             for(var k in o)if(new RegExp("("+ k +")").test(format))
  118.             format = format.replace(RegExp.$1,
  119.             RegExp.$1.length==1 ? o[k] :
  120.             ("00"+ o[k]).substr((""+ o[k]).length));
  121.             return format;
  122.         }
  123.  
  124.         //删除联系人信息
  125.         function del(phone){
  126.              db.transaction(function(tx){
  127.                 //注意这里需要显示的将传入的参数phone转变为字符串类型
  128.                 tx.executeSql('delete from contact where phone=?',[String(phone)],onSuccess,onError);
  129.             });
  130.         }
  131. </script>
  132. </html>

http://blog.csdn.net/hbcui1984/article/details/8471063

在windows7上，sqllite实际存储在下面的路径里，删除掉下面的文件就相当于清空了sql数据（SirBox是用户名）

C:\Users\SirBox\AppData\Local\Google\Chrome\User Data\Default\databases

http://my.oschina.net/u/590484/blog/70929

寡人写的第一个HTML5页面的更多相关文章

  1. 写给“有钱大爷”、”美工殿下”、“前端文艺青年”的微信HTML5页面设计建议

    ==============================   2018更新 iphone X 的设计内容   ==============================     我保证你一分钟就 ...

  2. 微信HTML5页面设计建议

    一个HTML5页面从提出到完成上线的流程:>   1.需求方.设计人员.H5实现人员三方共同讨论实现方案 2.设计人员出设计图 3.H5人员按设计图出H5页面 4.需求方评估已实现的H5页面后给 ...

  3. HTML5页面开发的基础性模板

    分享一个HTML5页面开发的基础性模板,包含了两个版本: 开发版本 注释版本 开发版本 <!DOCTYPE html> <html> <head> <meta ...

  4. 12小时包你学会基于ReactMix框架的ReactNativeApp开发（二）基于Css+HTML写第一个app页面

    上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...

  5. JS事件 加载事件（onload）注意：1. 加载页面时，触发onload事件，事件写在<body>标签内。 2. 此节的加载页面，可理解为打开一个新页面时。

    加载事件(onload) 事件会在页面加载完成后,立即发生,同时执行被调用的程序. 注意:1. 加载页面时,触发onload事件,事件写在<body>标签内. 2. 此节的加载页面,可理解 ...

  6. 用Phaser来制作一个html5游戏——flappy bird （二）

    在上一篇教程中我们完成了boot.preload.menu这三个state的制作,下面我们就要进入本游戏最核心的一个state的制作了.play这个state的代码比较多,我不会一一进行说明,只会把一 ...

  7. 我的第一个html页面

    <!DOCTYPE html><meta charset="UTF-8"><title>第一个html5界面</title>< ...

  8. 转：HTML5页面如何在手机端浏览器调用相机、相册功能

    HTML5页面如何在手机端浏览器调用相机.相册功能 开发微信端浏览器访问的HTML5的页面,页面中有一个<input id="input" type="file&q ...

  9. Web开发从零单排之一：在新浪云平台SAE上开发一个html5电子喜帖

    需求描述: 本人大婚将至,女朋友说“现在都流行在微信上发电子请帖了,你不是技(cheng)术(xu)宅(yuan)嘛,不会连这个都搞不定吧” 本人嘴上说这等小事何足挂齿,但心里还是七上八下的,虽然自认 ...

随机推荐

  1. schedule() 和 scheduleAtFixedRate() 的区别--转载

    1.  schedule() ,2个参数方法:在执行任务时,如果指定的计划执行时间scheduledExecutionTime <= systemCurrentTime,则task会被立即执行. ...

  2. leecode 每日解题思路 102-Binary Tree Level Order Traversal

    題目描述: 题目链接: 102-Binary Tree Level Order Traversal 这个问题要解决的是如何逐层遍历一个二叉树,并把同一层元素放入同一list中, 再将所有元素返回. 其 ...

  3. Android开发之线程池使用总结

    线程池算是Android开发中非常常用的一个东西了,只要涉及到线程的地方,大多数情况下都会涉及到线程池.Android开发中线程池的使用和Java中线程池的使用基本一致.那么今天我想来总结一下Andr ...

  4. 下载好一个android软件之后，怎样自动提示安装？

    最近在做毕设,里面牵涉到版本更新,当有新版本时可以下载新版本,下载完成之后提示安装.那么怎么实现下载完成之后提示安装呢? 直接上代码吧: File mFile = new File(Environme ...

  5. asp.net分页控件库

    AspNetPager分页控件 AspNetPager分页控件解决了分页中的很多问题,直接采用该控件进行分页处理,会将繁琐的分页工作变得简单化,下面是我如何使用AspNetPager控件进行分页处理的 ...

  6. android微信简单界面

    这几天没事做了一个简单的菜单布局,在这里我没有添加任何的功能只是做了一个简单的布局.看着还可以,就想着与大家分享一下. 代码如下: <LinearLayout xmlns:android=&qu ...

  7. 远程之SSH

    SSH(Secure Shell的缩写),由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为建立在应用层和传输层基础上的安全协议.SSH 是目前较可靠,专为远 ...

  8. struts2拦截器的实现原理

    拦截器(interceptor)是Struts2最强大的特性之一,也可以说是struts2的核心,拦截器可以让你在Action和result被执行之前或之后进行一些处理.同时,拦截器也可以让你将通用的 ...

  9. c#进程间通讯方案之IPC通道

    转载:http://www.cnphp.info/csharp-ipc-channel-remoting.html 最近一直纠结与使用多进程还是多线程来构建程序.多线程的方法似乎不错,但是一个进程可承 ...

  10. 20160418javaweb之 Filter过滤器

    Servlet规范中 Servlet Listener Filter 1.开发Filter 想要开发一个过滤器需要如下两个步骤: (1)写一个类实现特定的接口Filter 生命周期:当服务器启动时,w ...