2011년 5월 23일 월요일

HTML5 - code example of ContentEditable and LocalStorage - create a web sticky note!


HTML5에서는 HTML 내에 포함된 Text을 "contenteditalbe" 속성에 의해서 수정할수 있습니다. 대부분의 경우 "<td></td>" tag 안에서 사용 될 것 입니다.
<table width=480 height=480 border=0 cellspacing=0 cellpadding=62>
<td background=
"https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/stickynote.jpg" contenteditable="true" id="scribble" onkeyup="storeUserScribble(this.id)"></td>
</table>


그리고 "Contenteditable"에 의해서 변경된 Text는 "localStorage"기능으로 저장 할 수 있습니다.
<script>
function storeUserScribble(id) {
var scribble = document.getElementById('scribble').innerHTML;
localStorage.setItem('userScribble',scribble);
}
function getUserScribble() {
if ( localStorage.getItem('userScribble')) {
var scribble = localStorage.getItem('userScribble');
}
else {
var scribble = '<font color=blue face="Geneva, Arial" size=5><i>You can scribble directly on this sticky... and I will also remember your message the next time you visit my blog!</i></font>';
}
document.getElementById('scribble').innerHTML = scribble;
}
</script>


localStorage에 저장될때 URL+ID로 구분하기 합니다. 똑 같은 기능을 사용하는 A.html, B.html 이 있고 "contenteditable"이 있는 객체의 ID가 "scribble"이라고 할때 A.html, B.html은 똑같은 Code지만 서로 다른 내용을 저장할 수 있는 것입니다.
아래는 Code Example 다운로드 링크 입니다.

You can download the complete HTML of this example by clicking here.

댓글 1개:

블록체인 개요 및 오픈소스 동향

블록체인(block chain) 블록체인은 공공 거래장부이며 가상 화폐로 거래할때 발생할때 발생할 수 있는 해킹을 막는 기술. 분산 데이터베이스의 한 형태로, 지속적으로 성장하는 데이터 기록 리스트로서 분산 노드의 운영자에 의한 임의 조작이 불가...