<!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. 构造方法，this关键字，static关键字，封装，静态变量

    1.构造方法 构造方法是一种特殊的方法,是专门用于创建/实例化对象的方法. 构造方法根据是否有参数分为两类:1.无参构造方法  2.有参构造方法 1.1无参构造方法 无参构造方法就是构造方法中没有参数 ...

  2. 用python脚本获取运行环境中的module 列表

    由于脚本运行在远程环境,总报错说一些module没有.所以决定彻底对环境进行一次摸底. 于是,用如下代码即可实现: #!/usr/bin/env python import sys try: #pri ...

  3. mysql优化:explain分析sql语句执行效率

    Explain命令在解决数据库性能上是第一推荐使用命令,大部分的性能问题可以通过此命令来简单的解决,Explain可以用来查看SQL语句的执行效 果,可以帮助选择更好的索引和优化查询语句,写出更好的优 ...

  4. 畅捷通T+12.2升级时发生的错误及处理方法图解

    前言:最近处理一个客户单位的财务数据,需要从2004年的U820版本的数据升级到畅捷通T+12.2版本.经查,该升级先要将原数据升级到T6,再从T6升级到畅捷通T+12.2版本.U820升级到T6很简 ...

  5. Delphi调用API函数获取Windows目录信息、获取System目录信息、获取Temp临时文件目录信息

    var Str1, Str2: Array[..Max_Path]of Char;//开辟缓冲区 Str3: Array[..]of Char; begin GetWindowsDirectory(@ ...

  6. STD函数的内部计算公式

    各股票软件的标准差函数STD是不同的,而布林线的上下轨是以STD为基础计算出来的,所以使用布林线应小心.以2008/3/28的上证综指为例,利用如下代码:"收盘价3日STD:STD(CLOS ...

  7. callable函数 stride的意义 Math.round()，Math.ceil()，Math.floor()用法

    callable()函数检查一个函数是否可以调用 如果返回True,object仍然可能调用失败:但如果返回False,调用对象ojbect绝对不会成功. 对于函数, 方法, lambda 函式, 类 ...

  8. 安卓GridView奇偶行不同颜色

    背景:安卓制作表格,两列多行,奇数行和偶数行背景色不同 分析:GridView是经常用来制作表格的,但是和ListView不同,不能简单的用position % 2 == 0/1 来判断奇偶行,下面提 ...

  9. Linq、Lambda表达式详细总结(转)

    (一)输入参数 在Lambda表达式中,输入参数是Lambda运算符的 左边部分.它包含参数的数量可以为0.1或者多个.只有当输入参数为1时,Lambda表达式左边的一对小括弧才可以省略.输入参数的数 ...

  10. Gym - 100637J

    On the most perfect of all planets i1c5l various numeral systems are being used during programming c ...