이 기사에서는 HTML5의 두 가지 새로운 기능인 contenteditable과 localStorage를 살펴보겠습니다. HTML5와 W3C 사양을 읽은 후, 나는 이러한 새로운 기능을 보여주기 위해 동일한 프로그램에 예제를 작성하고 싶었습니다.
앞서 작성한 HTML 5 예제를 보고 계시는 동안 저는 이러한 새로운 HTML5 기능을 보다 참신한 방식으로 실행하기 위해 간단하지만 적용 가능한 예제를 만드는 것에 대해 생각하고 있었습니다. 내 목표는 단순히 이러한 HTML 5 API를 보여주는 것이 아니라 예제를 사용하여 개발자에게 실용적이고 혁신적인 방식으로 이러한 API를 실제로 구현하는 방법을 보여주는 것입니다.
1990년대 중반에 나는 'WEB 스티커 메모'라는 소프트웨어 특허를 등록했다. 가장 간단하게 설명하자면, 실제 컴퓨터 모니터에 붙이는 효과와 마찬가지로 웹 페이지에 붙는 "노란색 스티커 메모"를 만들 수 있습니다. HTML5의 콘텐츠 편집 기능과 로컬 저장 기능을 통해 웹 스티커 메모를 빠르고 쉽게 만들 수 있습니다!
프로그램 사용 방법 시연:
마우스를 사용하여 스티커 메모 영역을 클릭하고 정보를 입력합니다. 이 프로그램은 귀하가 입력한 모든 정보를 로컬 저장소(쿠키가 아님)에 저장합니다. 이 페이지를 다시 방문하면 포스트잇 정보가 지난번에 쓴 내용을 기억할 것입니다. HTML5를 완벽하게 구현하는 브라우저는 없다는 점을 명심하세요. 이 예제는 Firefox 3.5 이상과 같이 HTML5를 지원하는 브라우저에서 실행되어야 합니다.
localStorage를 구현하는 주요 방법은 다음과 같이 간단합니다.
함수 storeUserScribble(id){
var scribble = document.getElementById('scribble').innerHTML;
localStorage.setItem('userScribble',scribble);
}
함수 getUserScribble(){
if (localStorage.getItem('userScribble')){
var scribble = localStorage.getItem('userScribble');
}
또 다른 {
var scribble = ' < 글꼴 색상 = 파란색 얼굴 = ”Geneva, Arial” size = 6 >< i > 이 스티커 메모에 원하는 대로 적으시면 됩니다...다음에 제 블로그를 방문하시면 기억하실 겁니다. 당신이 입력한 정보! < / / i& gt; < / 글꼴 > ';
}
document.getElementById('scribble').innerHTML = 낙서;
}
나는 콘텐츠 편집 가능 속성과 onkeyup 이벤트를 <td>에 배치하기로 결정했습니다.
| < td 배경 =”” contenteditable =”true” id =”scribble” onkeyup =”storeUserScribble(this.id)” ></ td > |
예제의 전체 HTML 코드는 여기에서 다운로드할 수 있습니다.
이 예에서는 스티커 메모의 크기를 조정할 수 있습니다. 작은 스티커 메모를 만들어 웹 페이지에 배치하면 웹 사이트나 웹 애플리케이션에 흥미로운 기능이 추가됩니다.
영어 소스: HTML5 - ContentEditable 및 LocalStorage의 코드 예 - 웹 스티커 메모 만들기!