好吧，其实是抄来的

<!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. 编写Qt Designer自定义控件（一）——如何创建并使用Qt自定义控件

    在使用Qt Designer设计窗体界面时,我们可以使用Widget Box里的窗体控件非常方便的绘制界面,比如拖进去一个按钮,一个文本编辑器等.虽然Qt Designer里的控件可以满足我们大部分的 ...

  2. FastJSON应用前测试--转载

    FastJSON 应用前测试   FastJSON是一个很好的java开源json工具类库,相比其他同类的json类库,它的速度的确是fast,最快!但是文档做得不好,在应用前不得不亲测一些功能.   ...

  3. EL表达式读取数据（在Map，javaBean,List)

    <%@page import="cn.hncu.domain.User"%><!--这里是进行导包--><%@ page language=" ...

  4. Java IO学习笔记

    Java流的分类,一般可按以下方式分: 按方向分,分为输入流,输出流. 按类型分,分为字节流和字符流. 2.1字节流是通过字节来读取数据 2.2字符流是通过字符来读取数据 按操作方式分,分为节点流和过 ...

  5. Java基础知识强化之IO流笔记60：打印流 之 改进复制文本文件的案例

    1. 使用打印流改进复制文本文件的案例 2. 代码示例: package cn.itcast_03; import java.io.BufferedReader; import java.io.Buf ...

  6. ASP.NET MVC(一) 什么是Razor

    Razor 是一种向网页添加基于服务器的代码的标记语法 Razor 不是编程与语言.它是服务端标记语言. 当网页被写入浏览器时,基于服务器的代码能够创建动态内容.在网页加载时,服务器在向浏览器返回页面 ...

  7. datejs lib

    // Get today's date Date.today(); // Add 5 days to today Date.today().add(5).days(); // Get Friday o ...

  8. T-SQL通过触发器创建级联更新·级联删除

    create trigger t_table_a on table_a for update,dalete begin if exists(select 1 from inserted) update ...

  9. 20160410javaweb之JDBC---DBUtils框架

    DBUtils 1.DbUtils 工具类 2.QueryRunner -- 两行代码搞定增删改查 (1)QueryRunner() --需要控制事务时,使用这组方法 int update(Conne ...

  10. 最新的 cocoapods 安装与使用（2016.11）

    cocoapods简介: cocoapods 是iOS的类库管理工具,可以让开发者很方便集成各种第三方库,而不用去网站上一个个下载,再一个个文件夹的拖进项目中,还得添加相关的系统依赖库.只需要安装好c ...