好吧，其实是抄来的

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8"/>

    <title>HTML5本地存储之本地数据库篇</title>

    <style>

        .addDiv{

            border: 2px dashed #ccc;

            width:400px;

            text-align:center;

        }

        th {

            font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

            color: #4f6b72;

            border-right: 1px solid #C1DAD7;

            border-bottom: 1px solid #C1DAD7;

            border-top: 1px solid #C1DAD7;

            letter-spacing: 2px;

            text-transform: uppercase;

            text-align: left;

            padding: 6px 6px 6px 12px;

        }

        td {

            border-right: 1px solid #C9DAD7;

            border-bottom: 1px solid #C9DAD7;

            background: #fff;

            padding: 6px 6px 6px 12px;

            color: #4f6b72;

        }

    </style>

</head>

<body onload="loadAll()">

    <div class="addDiv">

        <label for="user_name">姓名：</label>

        <input type="text" id="user_name" name="user_name" class="text"/>

        <br/>

        <label for="mobilephone">手机：</label>

        <input type="text" id="mobilephone" name="mobilephone"/>

        <br/>

        <label for="mobilephone">公司：</label>

        <input type="text" id="company" name="company"/>

        <br/>

        <input type="button" onclick="save()" value="新增记录"/>

    </div>

    <br/>

    <div id="list">

    </div>

</body>

<script language="javascript">

        //打开数据库

        var db = openDatabase('contactdb','','local database demo',204800);

        //保存数据

        function save(){

            var user_name = document.getElementById("user_name").value;

            var mobilephone = document.getElementById("mobilephone").value;

            var company = document.getElementById("company").value;

            //创建时间

            var time = new Date().getTime();

            db.transaction(function(tx){

                tx.executeSql('insert into contact values(?,?,?,?)',[user_name,mobilephone,company,time],onSuccess,onError);

            });

        }

         //sql语句执行成功后执行的回调函数

        function onSuccess(tx,rs){

            alert("操作成功");

            loadAll();

        }

        //sql语句执行失败后执行的回调函数

        function onError(tx,error){

            alert("操作失败，失败信息："+ error.message);

        }

                //将所有存储在sqlLite数据库中的联系人全部取出来

        function loadAll(){

            var list = document.getElementById("list");

            db.transaction(function(tx){

                //如果数据表不存在，则创建数据表

                tx.executeSql('create table if not exists contact(name text,phone text,company text,createtime INTEGER)',[]);

                //查询所有联系人记录

                tx.executeSql('select * from contact',[],function(tx,rs){

                   if(rs.rows.length>0){

                        var result = "<table>";

                        result += "<tr><th>序号</th><th>姓名</th><th>手机</th><th>公司</th><th>添加时间</th><th>操作</th></tr>";

                        for(var i=0;i<rs.rows.length;i++){

                            var row = rs.rows.item(i);

                            //转换时间，并格式化输出

                            var time = new Date();

                            time.setTime(row.createtime);

                            var timeStr = time.format("yyyy-MM-dd hh:mm:ss");

                            //拼装一个表格的行节点

                            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>";

                        }

                        list.innerHTML = result;

                   }else{

                        list.innerHTML = "目前数据为空，赶紧开始加入联系人吧";

                   }

                });

            });

        }

        Date.prototype.format = function(format)

        {

            var o = {

            "M+" : this.getMonth()+1, //month

            "d+" : this.getDate(),    //day

            "h+" : this.getHours(),   //hour

            "m+" : this.getMinutes(), //minute

            "s+" : this.getSeconds(), //second

            "q+" : Math.floor((this.getMonth()+3)/3),  //quarter

            "S" : this.getMilliseconds() //millisecond

            }

            if(/(y+)/.test(format)) format=format.replace(RegExp.$1,

            (this.getFullYear()+"").substr(4 - RegExp.$1.length));

            for(var k in o)if(new RegExp("("+ k +")").test(format))

            format = format.replace(RegExp.$1,

            RegExp.$1.length==1 ? o[k] :

            ("00"+ o[k]).substr((""+ o[k]).length));

            return format;

        }

        //删除联系人信息

        function del(phone){

             db.transaction(function(tx){

                //注意这里需要显示的将传入的参数phone转变为字符串类型

                tx.executeSql('delete from contact where phone=?',[String(phone)],onSuccess,onError);

            });

        }

</script>

</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. BeagleBone Black Linux驱动程序开发入门（0）： 开发环境

    搭建arm-linux交叉编译环境的教程有很多,这里只作简要说明.Host宿主机是Ubuntu10.04,我把它装在Windows XP的VirtualBox虚拟机中,这样相当于一台主机有两个操作系统 ...

  2. 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

    瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样 ...

  3. HDU1495(bfs)

    非常可乐 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  4. 百度编辑器umeditor使用总结

    百度编辑器是一个功能很全.很强大. 百度单张图片上传只能存储在项目下面,而不能独立自定义存储位置,因此重写上传代码 百度文章中的图片是通过base64实现的,直接存储在数据库中 tomcat通过虚拟路 ...

  5. SqlMgmt sql2008报错

    标题: Microsoft SQL Server Management Studio------------------------------ 无法显示请求的对话框. --------------- ...

  6. 你不知道的javascript 上卷 读书笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. VS 2013 Chrome PPAPI 开发环境

    当前系统版本为 Windows 8.1 x64, Chrome 版本为 50.0 1. 准备工作 下载并安装 Python https://www.python.org/download/ * 必须使 ...

  8. ZOJ 1025 Wooden Sticks（快排+贪心）

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=25 题目大意:机器运送n个木条,每个木条有一个长度和重量.运送第一根木 ...

  9. HDU 4089 Activation（概率DP）（转）

    11年北京现场赛的题目.概率DP. 公式化简起来比较困难....而且就算结果做出来了,没有考虑特殊情况照样会WA到死的.... 去参加区域赛一定要考虑到各种情况.   像概率dp,公式推出来就很容易写 ...

  10. P1417 烹调方案

    P1417 烹调方案 题目提供者tinylic 标签 动态规划 难度 普及+/提高 题目背景 由于你的帮助,火星只遭受了最小的损失.但gw懒得重建家园了,就造了一艘飞船飞向遥远的earth星.不过飞船 ...