<!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>

    <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 id="add" type="button" value="新增记录" />

    </div>

    <br />

    <div id="list">

    </div>

    <script type="text/javascript">

        //打开数据库

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

        window.onload = function () {

            loadAll();

        }

        $('#add').onclick = function () {

            save();

        }

        //保存数据

        function save() {

            var user_name = $('#user_name').value;

            var mobilephone = $('#mobilephone').value;

            var company = $('#company').value;

            //创建时间

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

            db.transaction(function (tx) {

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

                    onSuccess, onError);

            });

        }

        //刷新数据库  并渲染

        function loadAll() {

            var list = $('#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>name姓名</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 = "目前数据为空，赶紧开始加入联系人吧";

                    }

                });

            });

        }

        //删除信息

        function del(phone) {

            db.transaction(function (tx) {

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

            });

        }

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

        function onSuccess(tx, rs) {

            alert("操作成功");

            loadAll();

        }

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

        function onError(tx, error) {

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

        }

        Date.prototype.format = function (format) {

            var o = {

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

                "d+": this.getDate(),

                "h+": this.getHours(),

                "m+": this.getMinutes(),

                "s+": this.getSeconds(),

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

                "S": this.getMilliseconds()

            }

            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 $(s) {

            return document.querySelector(s);

        }

    </script>

</body>

</html>

HTML5本地存储之本地数据库篇的更多相关文章

  1. iOS 图片本地存储、本地获取、本地删除

    在iOS开发中.经常用到图片的本地化. iOS 图片本地存储.本地获取.本地删除,可以通过以下类方法实现. p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: ...

  2. HTML5系列三（多媒体播放、本地存储、本地数据库、离线应用）

    各浏览器对编码格式的支持情况 audio和video元素的属性介绍 1.src:媒体数据的URL地址 <video src="pr6.mp4"></video&g ...

  3. Html5 学习系列（六）Html5本地存储和本地数据库

    一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cooki ...

  4. Html5本地存储和本地数据库

    一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cooki ...

  5. HTML5本地存储和本地的数据库

    一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cooki ...

  6. HTML5离线存储和本地缓存

    一.离线存储 有一个web应用有三个文件index.html,a.js,b.css,现在需要把js和css文件缓存起来 1.在index.html里加上<html manifest=" ...

  7. HTML5——web存储 Web SQL 数据库 应用程序缓存 Web Workers 服务器发送事件 WebSocket

    web存储 比cookie更好的本地存储方式 localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. sessionStorage - 用于临时保存同一窗口( ...

  8. HTML5本地存储之Web Storage实例篇,最有用的是localStorage

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 利用HTML5开发Android(7)---HTML5本地存储之Database Storage

    在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,H ...

随机推荐

  1. git提交代码时，Unstaged changes如何过滤.class .log等文件

    在项目下创建一个.gitignore文件,内容如下: 可以在文件目录中加入这个文件,也可以在eclipse中项目下加入此文件 /target/表示忽略target文件夹下的内容 .class 表示忽略 ...

  2. kali在vbox上运行设置共享文件夹

    mount -t vboxsf VBoxShared /root/Desktop/vbox 0x00 使用共享文件夹的前提 需要自行安装增强功能:https://jingyan.baidu.com/a ...

  3. unittest报告出现dict() -> new empty dictionary错误解决办法

    unittest报告出现dict() -> new empty dictionary错误解决办法 说一下原因,这是由于unittest中采用了ddt驱动.  由于版本问题导致 问题如图: 解决办 ...

  4. Openrasp源码分析

    Openrasp是百度关于rasp技术的开源项目,由于工作需要,之前对rasp的源码进行了简单的分析.文章是之前就写好的,现在放出了,希望对大家有写帮助. OpenRASP中java引擎的源码分析 安 ...

  5. js左右大小变化

    点左边左边变大.点右边右边大左边小 <style type="text/css"> *{ margin:0px auto; padding:0px; } #wai{ w ...

  6. Linux资源分析工具杂谈(长文慎入)

    Linux资源分析工具杂谈 开篇之前请大家先思考一个问题:        磁盘的平均I/O响应时间是1 ms,这个指标是好,还是差? 众所周知,计算机科学是客观的,也就是说对于一个给定的问题,我们总是 ...

  7. 【论文速读】XiangBai_CVPR2018_Rotation-Sensitive Regression for Oriented Scene Text Detection

    XiangBai_CVPR2018_Rotation-Sensitive Regression for Oriented Scene Text Detection 作者和代码 caffe代码 关键词 ...

  8. 跟我一起学python(1)

    1.变量 定义一个变量  会有三个特征  id,type,value print(id(age),type(age),age) 命名推荐用下划线方式 (尽量用英文  不要过长  意思要明白) numb ...

  9. 寻找U2OS中表达的基因及其promoter并用于后续annotation

    方法1.RNA-seq得到不同表达程度基因 方法2. 直接download U2OS_gene.csv https://cancer.sanger.ac.uk/cell_lines/download ...

  10. android 开发设计模式---Strategy模式

    假设我们要出去旅游,而去旅游出行的方式有很多,有步行,有坐火车,有坐飞机等等.而如果不使用任何模式,我们的代码可能就是这样子的. 12345678910111213141516171819202122 ...