好吧，其实是抄来的

<!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. MySQL B+树索引和哈希索引的区别

      导读 在MySQL里常用的索引数据结构有B+树索引和哈希索引两种,我们来看下这两种索引数据结构的区别及其不同的应用建议. 二者区别 备注:先说下,在MySQL文档里,实际上是把B+树索引写成了BT ...

  2. IOPS=(Queue Depth）/（IO latency)

    IO 延迟:存储设备的IO延迟 Queue Depth:磁盘控制器所发出的批量指令的最大条数 IOPS:磁盘设备每秒的IO 三者之间的关系:IOPS=(Queue Depth)/(IO latency ...

  3. C# dynamic关键字的使用方法

    dynamic和var的区别:1.var声明一个局部变量只是一种简化语法,它要求编译器根据一个表达式推断具体的数据类型.2.var只能用于声明方法内部的局部变量,而dynamic可用于局部变量,字段, ...

  4. Java开发之I/O读取文件实例详解

    在java开发或者android开发中,读取文件是不可避免的,以下对java开发中读取文件做了归纳和详解: 1.按字节读取文件内容2.按字符读取文件内容3.按行读取文件内容 4.随机读取文件内容 pa ...

  5. ALTER---为已创建的表添加默认值

    alter table table_name modify column_name default default_value; 例: alter table userinfo modify emai ...

  6. webstom 如何获取github上面的项目工程

    需要你配好webstorm的github相关的配置,安装好git.exe; 如何配置请参考: webstorm 如何配置git 这个点击github后 会有个提示框 如下图: 如果没有成功,会弹出下面 ...

  7. 盘点 Github 所用到的开源项目

    http://www.php100.com/html/it/mobile/2014/0401/6736.html 在致力于开源事业的同时,Github也使用一些非常优秀的开源项目的来打造自己的平台与服 ...

  8. cookie和session可能需要知道的知识

    做Android程序员,了解服务器的知识是相当重要的,比如cookie和session. 首先介绍一点背景知识,我们知道HTTP的连接是无状态的,HTTPS只是增加了安全,有了SSL证书来验证,作为服 ...

  9. 关于MySQL中使用LOAD DATA INFILE导入csv文件时的日期格式问题

    在使用MySQL时,常常会用到Load Data Infile来导入数据,在遇到Date类型的列时,有时会遇到格式转换的问题: 首先创建一张简单的people表,包含名字,生日,年龄三个字段: mys ...

  10. [python]魔术方法

    一.初始化: 1.__new__方法,初始化过程中第一个用到的方法(用处不大). 2.之后,__init__方法,构造方法. 3.最后,在对象回收时,调用__del__方法.如果解释器退出时,对象还存 ...