好吧，其实是抄来的

<!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. leecode 每日解题思路 64 Minimum Path Sum

    题目描述: 题目链接:64 Minimum Path Sum 问题是要求在一个全为正整数的 m X n 的矩阵中, 取一条从左上为起点, 走到右下为重点的路径, (前进方向只能向左或者向右),求一条所 ...

  2. 解锁Dagger2使用姿势（一）

    毫无疑问,Dagger2的 上手是有门槛的,有门槛是因为它里边的概念多,用起来复杂,可是一旦你学会了Dagger2的使用,你一定会爱不释手的.与ButterKnife和AndroidAnnotatio ...

  3. Spring MVC 3.0.5+Spring 3.0.5+MyBatis3.0.4全注解实例详解（四）

    这一章大象将详细分析web层代码,以及使用Spring MVC的注解及其用法和其它相关知识来实现控制器功能.     之前在使用Struts2实现MVC的注解时,是借助struts2-conventi ...

  4. Java基础知识强化之集合框架笔记73：如何选择使用哪种集合

    1. 到底使用那种集合.    看需求 是否是键值对象形式: 是:Map 键是否需要排序: 是:TreeMap 否:HashMap 不知道,就使用HashMap. 否:Collection 元素是否唯 ...

  5. MySQL INSERT DELAYED

    INSERT DELAYED 语法 INSERT [LOW_PRIORITY | DELAYED | HIGH_PRIORITY] [IGNORE] [INTO] tbl_name [(col_nam ...

  6. 读取group by 之外的字段

    序号 姓名 性别 身高 1 张三 男  185 2 李四 女  161 3 王五 女  166 4 赵六 男  178 1.获取男生女生人数 select count(性别) , 性别 from 表名 ...

  7. 解决无法获取 GridView 隐藏列值问题

    今天遇到了一个要获取GridView隐藏列值的问题,试了好几种方法,要么获取不到,要么获取到了类列的值也隐藏了,但在样式中这一列会多出一块,,但最后找到了一个功能实现而且实现了列完美隐藏的方法和大家分 ...

  8. PostgreSQL 修改列报错：cannot be cast automatically to type integer

    如果你直接使用可视化工具修改一个varchar字段为int类型的时候,可能会报错, 这里就需要自己去写一个语句去修改了 调整执行语句:ALTER TABLE table_name ALTER COLU ...

  9. C#类和成员定义

    1 定义类     C#用关键字class来定义类.默认情况下,类声明为内部(internal)的,即只有当前项目中的代码才能访问它.与之相对应的,还可以用public关键字来修饰,这样该类还可以由其 ...

  10. MVC小系列（十九）【mvc与站点地图】

    我的MvcSiteMap地图主要由实体文件,XML配置文件,C#调用文件组成,当然为了前台调用方法,可以为HtmlHelper添加一个扩展方法 第一步 定义站点地图实体 public class Mv ...