<!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. vuex 状态管理

    npm安装:cnpm install --save vuex 安装完:cnpm install main.js引入: import Vuex from 'vuex' Vue.use(Vuex);

  2. Windows Java安装

    jdk安装与配置jdk for windows1.下载官网地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html2. ...

  3. Two (DP)

    题意:求两串数字有多少个相同的子串,子串不要求连续. 思路:直接DP,dp[i][j] 代表A串长度为i.B串为j时满足条件的子串个数.转移dp[i][j] = dp[i -1][j] + dp[i] ...

  4. IO流（二）

    二.File类 概述 文件和目录路径名的抽象表示形式 构造方法 public File(String pathname) public File(String parent,String child) ...

  5. [NOIP赛前冲刺第一期]初赛基础知识归纳

    关于计算机 1.CPU 中央处理器(CPU,Central Processing Unit)是一块超大规模的集成电路,是一台计算机的运算核心(Core)和控制核心(Control Unit).它的功能 ...

  6. 记录ok6410 jlink 命令行调试uboot

    1\启动ok6410 进入uboot命令行 2＼启动JLinkGDBServer -device ARM11 3\arm-none-eabi-gdb u-boot 初始化脚本 # Connect to ...

  7. 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165316

    2018-2019-2 <网络对抗技术>Exp0 Kali安装 Week1 20165316 下载 我分别下载了kali-linux-2019.1-i386的镜像文件和kali-linux ...

  8. Linux防火墙iptables基础详解

    原文来自于:https://www.linuxidc.com/Linux/2017-01/140073.htm(引用自) 一:前言 防火墙,其实说白了讲,就是用于实现Linux下访问控制的功能的,它分 ...

  9. Xshell连接Linux慢问题解决办法

    由于各种原因,经常更换网络环境,然后发现,每次更换网络环境后,xshell连接虚拟机的rhel或者CentOS都几乎是龟速.... 今天专门查了一下解决方案: 原来是ssh的服务端在连接时会自动检测d ...

  10. C# WMI通过网络连接名称获取IP掩码网关

    /// <summary> /// 读取IP,掩码,网关地址 /// </summary> /// <param name="netConnectorName& ...