<!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. Xgboost总结

    从决策树.随机森林.GBDT最终到XGBoost,每个热门算法都不是孤立存在的,而是基于一系列算法的改进与优化.决策树算法简单易懂可解释性强,但是过拟合风险很大,应用场景有限:随机森林采用Baggin ...

  2. linux 笔记 第一天

    打开终端:ctrl+alt+t 清屏:ctrl+l 在终端在退出锁定:ctrl+c 目录:又称为文件夹,是包含所有的文件 目录创建规则: 1.大小是256 2.不能包含特殊字符 3.见名知义 路径:是 ...

  3. 安装linux虚拟机

    虚拟机安装流程 1. 安装系统 安装完成 2. 安装VMware tools linux(ubuntu 18.04 Desktop) 手动安装 1) 加载光驱 2) 双击进入光驱,在光驱的目录下,打开 ...

  4. Centos6.10 安装Python 2.7.16

    部署一个程序, 系统环境:CentOS 6.10 64位 Python版本:2.7 1.升级下系统 yum install eple-release -y yum update -y 2.下载pyth ...

  5. winsock I/O模型的分析

    几种winsock I/O模型的分析 套接字是通信的基础,是支持网络协议数据通信的基本接口.Winsocket 提供了一些有趣的I/O模型,有助于应用程序通过一种“异步”方式,一次对一个或者多个套接字 ...

  6. document.wrtie()用法

    推荐看这篇文章,非常的好 http://www.softwhy.com/article-8326-1.html

  7. Elasticsearch从入门到精通之Elasticsearch集群内的原理

    上一章节我介绍了Elasticsearch安装与运行,本章节及后续章节将全方位介绍 Elasticsearch 的工作原理 在这个章节中,我将会再进一步介绍 cluster . node . shar ...

  8. 对接 第三方物流APP 手机版

    昨天因为bibi项目要对接 物流信息 开始找了快递鸟文档,但是要填写申请APP,必须要注册公司才可以,这样非常麻烦.下面的第三方物理接口,绝对让你满意. https://m.kuaidi100.com ...

  9. linux创建桌面快捷方式

    这里拿postman举例,其他的程序类似 在/usr/sharp/applications新建postman.desktop文件(终端下输入vim /usr/sharm/applications/po ...

  10. oracle 两张关联表执行更新update

    UPDATE T_ASN_DTL ad1 SET ad1.cf03=( SELECT ac.TH003 FROM "T_ASN_DTL_copy" ac WHERE ac.udf0 ...