<!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. NodeMan架构

    在上一篇文章中我们介绍了NodeMan的基本概念,介绍了这是一套利用NodeJs框架来管理Ubuntu服务器的解决方案,接下来我们会继续介绍关于这样一套解决方案更多细节的内容. 后台: 使用node作 ...

  2. nvidia-smi 实时查看

    需要用到 watch 命令: watch -n nvidia-smi

  3. UGUI背包系统

    在Unity3d中,UGUI提供了Scroll Rect.Grid Layout Group.Mask这三个组件,下面就给大家介绍下如何用这个三个组件来实现滚动视图. 首先放置好背包的背景图 在矩形线 ...

  4. CSRF原理

    全称跨站伪造

  5. 前端学习历程--vue

    ---恢复内容开始--- 一.对比其他框架 1.react: 共同点: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件. 将注意力集中保持在核 ...

  6. 《高性能Mysql》解读---Mysql的事务和多版本并发

    1.base:ACID属性,并发控制 2.MySql事务的隔离级别有哪些,含义是什么? 3.锁知多少,读锁,写锁,排他锁,共享锁,间隙锁,乐观锁,悲观锁. 4.Mysql的事务与锁有什么关联?MySq ...

  7. 【数据结构】算法 LinkList (Insertion Sort List 链表插入排序)

    将一个单链表进行处理后,所得结果为一有序链表 Solution: 将原始链表逐个查询,插入新链表,在插入的同时对链表进行排序.时间复杂度O(n*n) public ListNode insertion ...

  8. linux系统安装MongoDB

    1.在官网https://www.mongodb.org/dl/linux/x86_64下载对应的安装压缩包,我用的是3.2.5,建议使用此版本,版本越高,可能会出现其它未知问题,比如需要glibc高 ...

  9. eclipse导出maven工程的可执行jar包

    一.eclipse导出maven工程的可执行jar包 建立两个maven工程 ZKServer 和ZKClient 注意:用maven进行开发管理的话,默认的打出来的jar包是不能运行的,需要在pom ...

  10. 练手——用Python写的时间戳转换为北京时间的小工具

    #北京时间需加上8小时bj = 8*3600 def time_stamp(times):    #一天总秒数    nonDaySeconds = 24*3600    leapmonths = [ ...