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개:

ETL 솔루션 환경

ETL 솔루션 환경 하둡은 대용량 데이터를 값싸고 빠르게 분석할 수 있는 길을 만들어줬다. 통계분석 엔진인 “R”역시 하둡 못지 않게 관심을 받고 있다. 빅데이터 역시 데이터라는 점을 볼때 분산처리와 분석 그 이전에 데이터 품질 등 데이...