HTML5 WebSql 本地关系数据库功能演示

Web Sql是HTML5的本地存储API，适用于存储关系型数据。 webSql并非HTML5标准的一部分，而是独立于HTML5的一个标准，其兼容性要低于localStorage，使用时注意多测试目标环境。

database

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2069
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// you can change titles in the end of code

/*
 * Micro framework templating
 * example mk.tpl('body',{title:'title'},callback);
 * call with $(title)
 */
var mk = (function() {
    'use strict';

return {
        tpl: function(element, args, callback) {
            var el = document.querySelector(element);
            if (!el) return;
            var b = el.innerHTML,
                c = this.df(b, args);
            el.innerHTML = c;
            if (typeof callback !== 'undefined') {
                callback(el);
            }
        },
        df: function(b, d) {
            var re = /\$\{|\}/,
                u = b.split(re),
                c = u.length;
            for (var i = 1; i < c; i++) {
                if (d.hasOwnProperty(u[i])) {
                    u[i] = d[u[i]];
                }
            }
            var s = u.join('');
            return s;
        }
    };
})();

// simple WebSql app
var myEvents = (function() {

'use strict';

return {

db: '',
        // default options
        cache: {
            db_name: 'dbEvents',
            db_table: 'events',
            db_version: '0.1',
            db_description: 'A Database of Events',
            db_not_support: 'WebSQL is not supported by your browser!',
            db_valid_form: 'You must enter a something!',
            db_error: 'db not found, your browser does not support web sql!'
        },

run: function() {
            var self = this;

if (window.openDatabase) {
                this.db = openDatabase(self.cache.db_name, self.cache.db_version, self.cache.db_description, 1024 * 1024);
                this.db.transaction(function(t) {
                    t.executeSql('CREATE TABLE IF NOT EXISTS ' + self.cache.db_table + ' (id INTEGER PRIMARY KEY ASC, date TEXT, hour TEXT, title TEXT, description TEXT)');
                });

} else {
                // not support
                alert(self.cache.db_not_support);
            }

// Hide preloader on load
            var t = setTimeout(function() {
                var self = this;
                document.querySelector('.preloader').classList.add('loaded');
                clearTimeout(t);
            }, 2000);

// show envets
            this.outputEvents();
            // init functions
            this.fns();

fns: function() {
            var self = this;
            // open modal
            document.getElementById('modal_open')
                .addEventListener('click', function(e) {
                    self.showOrhide(e);
                }, false);
            // close modal
            document.getElementById('modal_close')
                .addEventListener('click', function(e) {
                    self.showOrhide(e);
                }, false);
            // add event and hide modal
            document.getElementById('dbAdd')
                .addEventListener('click', function(e) {
                    e.preventDefault();
                    self.addEvent();
                }, false);
            // delete event and hide modal
            document.getElementById('dbDel')
                .addEventListener('click', function(e) {
                    e.preventDefault();
                    if (self.confirm('Are you sure') === true) {
                        self.drop();
                        document.querySelector('.modal-overlay')
                            .classList.remove('show');
                        document.getElementById('dbEvents')
                            .innerHTML = 'Clear Database....';
                        self.refresh(2000);
                    }
                }, false);

},
        // modal function
        showOrhide: function(e) {
            var modal = document.querySelector('.modal-overlay');
            e.preventDefault();
            if (modal.classList.contains('show')) {
                modal.classList.remove('show');
            } else {
                modal.classList.add('show');
            }
        },
        // confirm fn
        confirm: function(msg) {
            var data = confirm(msg + " ?");
            return data;
        },
        // refresh on delete
        refresh: function(time) {
            var t = setTimeout(function() {
                //window.location.reload(); 
                clearTimeout(t);
            }, time);
        },
        // delete
        drop: function() {
            var self = this;
            self.db.transaction(function(tx) {
                tx.executeSql('DROP TABLE ' + self.cache.db_table, [], self.outputEvents(), function onError(tx, error) {
                    document.getElementById('dbEvents').innerHTML = '<p class="error">Error: ' + error.message + '</p>';
                });
            });
        },
        // add event
        addEvent: function() {
            var self = this;
            if (this.db) {
                var date = document.getElementById('dbDate').value;
                var hour = document.getElementById('dbHour').value;
                var title = document.getElementById('dbTitle').value;
                var desc = document.getElementById('dbDescription').value;
                // if not empty values
                if (date !== '' && hour !== '' && title !== '' && desc !== '') {
                    self.db.transaction(function(t) {
                        t.executeSql('INSERT INTO ' + self.cache.db_table + ' (date,hour,title,description) VALUES (?,?,?,?)', [date, hour, title, desc]);
                        self.outputEvents();
                        document.getElementById('dbForm').reset();
                        document.querySelector('.modal-overlay').classList.remove('show');
                    });
                } else {
                    alert(self.cache.db_valid_form);
                }
            } else {
                alert(this.cache.db_error);
            }
        },
        // update events
        updateEvents: function(transaction, results) {

var self = this,
                result = document.getElementById('dbEvents'),
                json = document.getElementById('dbJson'),
                i, html = '',
                out = '';

result.innerHTML = '';

for (i = 0; i < results.rows.length; i++) {

var row = results.rows.item(i);
                out += JSON.stringify(row, undefined, 2) + ',\n';
                html += '<li>' +
                    '<a class="eventDel" href="javascript:void(0);" onclick="myEvents.deleteEvent(' + row.id + ');">×</a>' +
                    '<h3>' + row.title + '</h3>' +
                    '<div class="eventDate">' +
                    '<span class="in-left">' + row.date + '</span>' +
                    '<span class="in-right">' + row.hour + '</span>' +
                    '</div>' +
                    '<div class="eventDesc" contenteditable  onkeyup="myEvents.updateEvent(' + row.id + ', this)">' +
                    row.description +
                    '</div>' +
                    '</li>';

}

result.innerHTML = html;
            // very simple json output
            // but if work not touch :)
            out = out.replace(/,\s*$/, "");
            json.textContent = '[' + out + ']';
        },
        // update event
        updateEvent: function(id, el) {
            var self = this;
            this.db.transaction(function(tx) {
                tx.executeSql('UPDATE ' + self.cache.db_table + ' SET description = ? WHERE id = ?', [el.textContent, id], null, function() {
                    alert(self.cache.db_error);
                });
            });
        },
        // show events in html
        outputEvents: function() {
            var self = this;
            if (this.db) {
                this.db.transaction(function(t) {
                    t.executeSql('SELECT * FROM ' + self.cache.db_table, [], self.updateEvents);
                });
            } else {
                alert(self.cache.db_error);
            }
        },
        // delete event
        deleteEvent: function(id) {
            var self = this;
            if (this.db) {
                if (this.confirm('Are you sure') === true) {
                    self.db.transaction(function(t) {
                        t.executeSql('DELETE FROM ' + self.cache.db_table + ' WHERE id=?', [id], self.outputEvents());
                    });
                }
            } else {
                alert(self.cache.db_error);
            }
        }
    };
})();

window.addEventListener('DOMContentLoaded', function() {
    // text of html
    mk.tpl('#page', {
        preloader_title: 'WebSQL Demo',
        preloader_description: 'Please Wait....',
        dbSection_title: 'Demo Events with WebSql',
        dbSection_description: 'Add your events, also you can edit description and delete (<b>Note:</b>  you need refresh window to see the update description. ) ',
        modal_title: 'Add',
        modal_form_date: 'Date',
        modal_form_hour: 'Hour',
        modal_form_title: 'Title',
        modal_form_description: 'Description',
        modal_form_submit: 'Save',
        modal_form_delete: 'Delete table'
    });

myEvents.run();

}, false);

编译

CSS

/*  PAGE OR PEN OR SOMETHING
-------------------------------*/

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    font-size: 100.01%;
}
body {
    font-size: 100%;
    color: #333;
    line-height: 1.5em;
    font-family: "Helvetica Neue", Arial, Helvetica, Sans-Serif;
    text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.01);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
::selection {
    background: #3498db;
    color: #fff;
}
::-moz-selection {
    background: #3498db;
    color: #fff;
}
img::selection {
    background: transparent;
}
img::-moz-selection {
    background: transparent;
}
body {
    -webkit-tap-highlight-color: #3498db;
}
a {
    color: #217dbb;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
a:hover,
a:focus {
    color: #196090;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    font-family: "Helvetica Neue", Arial, Helvetica, Sans-Serif;
    color: #666;
}
h1 {
    font-size: 3em;
    line-height: 1;
    padding-top: 0.53em;
    margin-bottom: 0.5em;
}
h2 {
    font-size: 2em;
    padding-top: 0.25em;
    margin-bottom: 0.5em;
}
h3 {
    font-size: 1.5em;
    line-height: 1;
    padding-top: 0.35em;
    margin-bottom: 0.65em;
}
p {
    margin: 0 0 1.5em 0;
}
.loaded {
    opacity: 0;
    visibility: hidden;
    filter: alpha(opacity=0);
    transition: all 0.5s ease;
}
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 100%;
    z-index: 99999;
}
.preloader .preloader_inner {
    display: block;
    width: 80%;
    height: 100px;
    margin: 40px auto;
    padding: 5px;
    text-align: center;
}
.preloader .preloader_inner h3 {
    color: #666;
}
.preloader .preloader_inner p {
    color: #808080;
    /*  BASIC ANIMATION
--------------------------*/
    
    -webkit-animation: preloader 1s infinite ease;
    -ms-animation: preloader 1s infinite ease;
    animation: preloader 1s infinite ease;
}
@-webkit-keyframes preloader {
    50% {
        color: white;
    }
}
@keyframes preloader {
    50% {
        color: white;
    }
}
body {
    background: #fff;
    color: #333;
}
#page {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#page .wrapper {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#page .wrapper .wrapper_inner {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5em;
    width: 100%;
    height: 100%;
}
.menu {
    position: fixed;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
}
.menu #modal_open {
    display: block;
    width: 100%;
    padding: 0.5em 1em;
    outline: none;
    cursor: pointer;
    border: 1px solid #217dbb;
    background: #3498db;
    color: #fff;
    /* Modal */
    
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.modal-overlay {
    background: #fff;
    height: 100%;
    left: 0;
    display: block;
    overflow: auto;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.modal-overlay #modal_close {
    position: fixed;
    top: 0;
    right: 0;
    padding: 0.2em;
    background: #fff;
    border: none;
    font-size: 3em;
    color: #3498db;
    outline: none;
    cursor: pointer;
}
.modal-overlay #modal_close:hover {
    color: #fff;
    background: #3498db;
}
.modal-overlay .modal-content {
    background: #fff;
    margin: 0 auto;
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    padding: 1em;
    border-radius: 4px;
}
@media only screen and (min-width: 240px) {
    .modal-overlay .modal-content {
        width: 100%;
        -webkit-transition: width 0.5s ease;
        -moz-transition: width 0.5s ease;
        transition: width 0.5s ease;
    }
}
@media only screen and (min-width: 320px) {
    .modal-overlay .modal-content {
        width: 100%;
        -webkit-transition: width 0.5s ease;
        -moz-transition: width 0.5s ease;
        transition: width 0.5s ease;
    }
}
@media only screen and (min-width: 480px) {
    .modal-overlay .modal-content {
        width: 100%;
        -webkit-transition: width 0.5s ease;
        -moz-transition: width 0.5s ease;
        transition: width 0.5s ease;
    }
}
@media only screen and (min-width: 768px) {
    .modal-overlay .modal-content {
        width: 60%;
        -webkit-transition: width 0.5s ease;
        -moz-transition: width 0.5s ease;
        transition: width 0.5s ease;
    }
}
@media only screen and (min-width: 1024px) {
    .modal-overlay .modal-content {
        width: 50%;
        -webkit-transition: width 0.5s ease;
        -moz-transition: width 0.5s ease;
        transition: width 0.5s ease;
    }
}
@media only screen and (min-width: 1200px) {
    .modal-overlay .modal-content {
        width: 50%;
        -webkit-transition: width 0.5s ease;
        -moz-transition: width 0.5s ease;
        transition: width 0.5s ease;
    }
}
.modal-overlay .modal-content #modal-title {
    font-size: 1.5em;
    text-align: center;
}
.modal-overlay .modal-content .modal-header {
    border-bottom: 1px solid #e6e6e6;
    padding: 0.5em 1em;
}
.modal-overlay .modal-content .modal-body {
    padding: 0.5em;
}
.modal-overlay .modal-content .modal-body #dbForm label {
    display: block;
    margin: 0;
    padding: 0;
    color: #333;
}
.modal-overlay .modal-content .modal-body #dbForm input,
.modal-overlay .modal-content .modal-body #dbForm textarea {
    display: block;
    width: 100%;
    margin: 0.5em auto;
    padding: 0.5em 1em;
    background: #e6e6e6;
    border: 1px solid #b3b3b3;
    color: #333;
}
.modal-overlay .modal-content .modal-footer {
    display: block;
    padding: 0.5em;
    border-top: 1px solid #e6e6e6;
}
.modal-overlay .modal-content .modal-footer input[type="submit"] {
    border: 1px solid #217dbb;
    background: #3498db;
    padding: 0.5em 1em;
    color: #fff;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.modal-overlay .modal-content .modal-footer input[type="submit"]:hover {
    border: 1px solid #217dbb;
    background: #217dbb;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    cursor: pointer;
}
.show {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#dbSection {
    display: block;
    margin: 2% auto;
    padding: 0;
    padding-top: 1%;
    padding-left: 1%;
    width: 100%;
    height: 100%;
    overflow: auto;
}
@media only screen and (min-width: 240px) {
    #dbSection {
        width: 90%;
        -webkit-transition: width 0.5s ease;
        -moz-transition: width 0.5s ease;
        transition: width 0.5s ease;
    }
}
@media only screen and (min-width: 320px) {
    #dbSection {
        width: 90%;
        -webkit-transition: width 0.5s ease;
        -moz-transition: width 0.5s ease;
        transition: width 0.5s ease;
    }
}
@media only screen and (min-width: 480px) {
    #dbSection {
        width: 95%;
        -webkit-transition: width 0.5s ease;
        -moz-transition: width 0.5s ease;
        transition: width 0.5s ease;
    }
}
@media only screen and (min-width: 768px) {
    #dbSection {
        width: 100%;
        -webkit-transition: width 0.5s ease;
        -moz-transition: width 0.5s ease;
        transition: width 0.5s ease;
    }
}
@media only screen and (min-width: 1024px) {
    #dbSection {
        width: 100%;
        -webkit-transition: width 0.5s ease;
        -moz-transition: width 0.5s ease;
        transition: width 0.5s ease;
    }
}
@media only screen and (min-width: 1200px) {
    #dbSection {
        width: 90%;
        -webkit-transition: width 0.5s ease;
        -moz-transition: width 0.5s ease;
        transition: width 0.5s ease;
    }
}
#dbSection h3 {
    color: #3498db;
}
#dbSection #dbEvents {
    margin: 0;
    padding: 0;
    list-style: none;
}
#dbSection #dbEvents li {
    display: inline-block;
    float: left;
    padding: 0;
    margin: 0;
    margin-right: 1%;
    margin-bottom: 1%;
    position: relative;
    background: #f2f2f2;
    border: 1px solid #ebebeb;
    padding: 0.5em;
}
@media only screen and (min-width: 240px) {
    #dbSection #dbEvents li {
        width: 100%;
        -webkit-transition: width 0.5s ease;
        -moz-transition: width 0.5s ease;
        transition: width 0.5s ease;
    }
}
@media only screen and (min-width: 320px) {
    #dbSection #dbEvents li {
        width: 100%;
    }
}
@media only screen and (min-width: 480px) {
    #dbSection #dbEvents li {
        width: 100%;
    }
}
@media only screen and (min-width: 768px) {
    #dbSection #dbEvents li {
        width: 49%;
    }
}
@media only screen and (min-width: 1024px) {
    #dbSection #dbEvents li {
        width: 32%;
    }
}
@media only screen and (min-width: 1200px) {
    #dbSection #dbEvents li {
        width: 32%;
    }
}
#dbSection #dbEvents li .eventDel {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.2em;
    color: #3498db;
    text-decoration: none;
    font-size: 2em;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#dbSection #dbEvents li .eventDel:hover {
    background: #3498db;
    color: #fff;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#dbSection #dbEvents li h3 {
    margin: 0;
    padding: 0.2em 0;
    margin-bottom: 0.2em;
}
#dbSection #dbEvents li .eventDate {
    display: block;
    background: #3498db;
    padding: 0.5em;
    color: #fff;
    overflow: hidden;
}
#dbSection #dbEvents li .eventDate .in-left {
    float: left;
}
#dbSection #dbEvents li .eventDate .in-right {
    float: right;
}
#dbSection #dbEvents li .eventDesc {
    padding: 0.5em 0.2em;
    border-bottom: 1px solid #3498db;
    color: #333;
}
#dbJson {
    display: block;
    width: 100%;
    padding: 0.2em;
    background: #e6e6e6;
    color: #333;
    word-break: break-word;
}

HTML

<div id="page">
    
    <div class="preloader">
        
        <div class="preloader_inner">
            <h3>${preloader_title}</h3>
            <p>${preloader_description}</p>
        </div>
    </div>

<nav class="menu">
                <button class="btn" type="button" id="modal_open">${modal_title}</button>
            </nav>

<section id="dbSection">
                <h3>${dbSection_title}</h3>
                <p>${dbSection_description}</p>
                <ul id="dbEvents"></ul>
                <pre id="dbJson"></pre>
            </section>

</div>
    </div>

<section class="modal-overlay">
        <div class="modal-content">
            <button class="btn-close" id="modal_close">×</button>

<div class="modal-header">
                <h3 id="modal-title">${modal_title}</h3>
            </div>

<div class="modal-body">
                <form action="#" method="post" id="dbForm">
                    <label>${modal_form_date}</label>
                    <input type="date" name="dbDate" id="dbDate" list="days">
                    <datalist id="days">
                        <option label="Independence Day">2013-07-04</option>
                        <option label="Labor Day">2013-09-02</option>
                        <option label="Columbus Day">2013-10-14</option>
                    </datalist>

<label>${modal_form_hour}</label>
                    <input type="time" name="dbHour" id="dbHour" list="times">
                    <datalist id="times">
                        <option label="Morning">08:00</option>
                        <option label="Mid-morning">11:00</option>
                        <option label="Noon">12:00</option>
                        <option label="In the afternoon">16:00</option>
                        <option label="In the night">21:00</option>
                    </datalist>

<label>${modal_form_title}</label>
                    <input type="text" name="dbTitle" id="dbTitle" list="event">
                    <datalist id="event">
                        <option value="Learn Node.js"></option>
                        <option value="Web Design"></option>
                        <option value="Testing Javascript"></option>
                        <option label="Good for you" value="Exercise"></option>
                        <option label="Always good" value="Relaxation"></option>
                    </datalist>

<label>${modal_form_description}</label>
                    <div name="dbDescription" id="dbDescription" rows="5"></div>
            </div>

</form>
        </div>
    </section>
    
</div>

Web Sql是HTML5的本地存储API，适用于存储关系型数据。 webSql并非HTML5标准的一部分，而是独立于HTML5的一个标准，其兼容性要低于localStorage，使用时注意多测试目标环境。

database

编辑器支持Emmet

快捷键

Web Sql是HTML5的本地存储API，适用于存储关系型数据。 webSql并非HTML5标准的一部分，而是独立于HTML5的一个标准，其兼容性要低于localStorage，使用时注意多测试目标环境。

database

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：