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=
"" contenteditable="true" id="scribble" onkeyup="storeUserScribble("></td>

그리고 "Contenteditable"에 의해서 변경된 Text는 "localStorage"기능으로 저장 할 수 있습니다.
function storeUserScribble(id) {
var scribble = document.getElementById('scribble').innerHTML;
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;

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.


댓글 쓰기

이 블로그의 인기 게시물

Android Service에서 AlertDialog 띄우기

MongoDB, 설치와 간단 사용법

Android Thread 내에서 UI 핸들링