html5本地存储的记事本代码,HTML5本地SQL实战记事本例子

html>

HTML5本地SQL记事本

body{font-size: 12px}

.note {

background-color: rgb(255, 240, 70);

height: 250px;

padding: 10px;

position: absolute;

width: 200px;

-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);

box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);

}

.note:hover .closebutton {display: block}

.closebutton {

display: none;

background-image: url(deleteButton.png);

height: 30px;

position: absolute;

right: -15px;

top: -15px;

width: 30px;

}

.edit {outline: none}

.timestamp {

position: absolute;

left: 0;

right: 0;

bottom: 0;

font-size: 9px;

background-color: #db0;

color: white;

border-top: 1px solid #a80;

padding: 2px 4px;

text-align: right;

}

var obj = {

sql : null,//数据库

captured : null,//点击的对象

highestZ : 0,//最大Z轴

highestId : 0 //最大ID号

};

try {

if (window.openDatabase) {

obj.sql = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 1024*1024*2);

!obj.sql&&alert("打开本地数据库失败，可能是数据库版本问题或者磁盘没有足够空间！");

} else {

alert("不能打开本地数据库，请使用支持本地储存的浏览器浏览！");

}

} catch(err) {

obj.sql = null;

alert("创建数据库失败，可能你的浏览器不支持html5！");

}

//创建一张纸条

function Note(){

var self = this;

//创建noteDIV并绑定事件

var note = document.createElement('div');

note.className = 'note';

note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);

note.addEventListener('click', function() { return self.onNoteClick() }, false);

this.note = note;

//创建note关闭按钮并绑定事件

var close = document.createElement('div');

close.className = 'closebutton';

close.addEventListener('click', function(e) { return self.close(e) }, false);

note.appendChild(close);

//创建note内容编辑区域

var edit = document.createElement('div');

edit.className = 'edit';

edit.setAttribute('contenteditable', true);

edit.addEventListener('keyup', function() { return self.onKeyUp() }, false);

note.appendChild(edit);

this.editField = edit;

//创建note脚部时间标志

var ts = document.createElement('div');

ts.className = 'timestamp';

note.appendChild(ts);

this.lastModified = ts;

//note写入文档

document.body.appendChild(note);

return this;

}

//扩展note对象方法

Note.prototype = {

get id(){

return this._id || 0;

},

set id(x){

this._id = x;

},

get text(){

return this.editField.innerHTML;

},

set text(x){

this.editField.innerHTML = x;

},

get timestamp(){

return this._timestamp || 0;

},

set timestamp(x){

if (this._timestamp == x)

return;

this._timestamp = x;

var date = new Date();

date.setTime(parseFloat(x));

this.lastModified.textContent = "最后修改: " + date.toLocaleDateString()+" "+date.toTimeString().split(" ")[0];

},

get left(){

return this.note.style.left;

},

set left(x){

this.note.style.left = x;

},

get top(){

return this.note.style.top;

},

set top(x){

this.note.style.top = x;

},

get zIndex(){

return this.note.style.zIndex;

},

set zIndex(x){

this.note.style.zIndex = x;

},

close: function(event){

var note = this;

obj.sql.transaction(function(tx){

tx.executeSql("DELETE FROM WebKitStickyNotes WHERE id = ?", [note.id]);

});

var duration = event.shiftKey ? 2 : .25;

this.note.style.webkitTransition = '-webkit-transform ' + duration + 's ease-in, opacity ' + duration + 's ease-in';

this.note.style.webkitTransformOrigin = "0 0";

this.note.style.webkitTransform = 'skew(30deg, 0deg) scale(0)';

this.note.style.opacity = 0;

//var self = this;

setTimeout(function() { document.body.removeChild(note.note) }, duration * 1000);

},

save: function(){

var note = this;

obj.sql.transaction(function (tx){

tx.executeSql("UPDATE WebKitStickyNotes SET note = ?, timestamp = ?, left = ?, top = ?, zindex = ? WHERE id = ?", [note.text, note.timestamp, note.left, note.top, note.zIndex, note.id]);

});

},

saveAsNew: function(){

this.timestamp = new Date().getTime();

var note = this;

obj.sql.transaction(function (tx){

tx.executeSql("INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex) VALUES (?, ?, ?, ?, ?, ?)", [note.id, note.text, note.timestamp, note.left, note.top, note.zIndex]);

});

},

onMouseDown: function(e){

obj.captured = this;

this.startX = e.clientX - this.note.offsetLeft;

this.startY = e.clientY - this.note.offsetTop;

this.zIndex = ++obj.highestZ;

var self = this;

if (!("mouseMoveHandler" in this)) {

this.mouseMoveHandler = function(e) { return self.onMouseMove(e) };

this.mouseUpHandler = function(e) { return self.onMouseUp(e) }

}

document.addEventListener('mousemove', this.mouseMoveHandler, true);

document.addEventListener('mouseup', this.mouseUpHandler, true);

return false;

},

onMouseMove: function(e){

if (this != obj.captured)

return true;

this.left = e.clientX - this.startX + 'px';

this.top = e.clientY - this.startY + 'px';

return false;

},

onMouseUp: function(e){

document.removeEventListener('mousemove', this.mouseMoveHandler, true);

document.removeEventListener('mouseup', this.mouseUpHandler, true);

return false;

},

onNoteClick: function(e){

this.editField.focus();

getSelection().collapseToEnd();

},

onKeyUp: function(){

this.save();

}

};

function loaded(){

obj.sql.transaction(function(tx) {

tx.executeSql("SELECT COUNT(*) FROM WebkitStickyNotes", [], function(result) {

loadNotes();

}, function(tx, error) {

tx.executeSql("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp REAL, left TEXT, top TEXT, zindex REAL)", [], function(result) {

loadNotes();

});

});

});

}

function loadNotes()

{

obj.sql.transaction(function(tx) {

tx.executeSql("SELECT id, note, timestamp, left, top, zindex FROM WebKitStickyNotes", [], function(tx, result) {

for (var i = 0; i 

var row = result.rows.item(i);

var note = new Note();

note.id = row['id'];

note.text = row['note'];

note.timestamp = row['timestamp'];

note.left = row['left'];

note.top = row['top'];

note.zIndex = row['zindex'];

if (row['id'] > obj.highestId)

obj.highestId = row['id'];

if (row['zindex'] > obj.highestZ)

obj.highestZ = row['zindex'];

}

!result.rows.length&&newNote();//如果没有数据就新建note

}, function(tx, error) {

alert('未能检索记录数据库: ' + error.message);

});

});

}

function newNote(){

var note = new Note();

note.id = ++obj.highestId;

note.timestamp = new Date().getTime();

note.left = Math.round(Math.random() * 400) + 'px';

note.top = Math.round(Math.random() * 500) + 'px';

note.zIndex = ++obj.highestZ;

note.saveAsNew();

}

obj.sql&&addEventListener('load', loaded, false);

使用html5本地sqlite数据库保存你创建的纸条，刷新或者下次你打开本页面时仍会显示那些纸条。使用支持html5的浏览器试一下。

新建

document.getElementById("newNoteButton").disabled = !obj.sql;

关键词: html5,数据库,opendatabase   编辑时间: 2013-11-05 15:58:18