이 기사에서는 HTML5의 2 가지 새로운 기능인 Contenteditable 및 LocalStorage를 살펴 보겠습니다. HTML5 및 W3C 사양 설명을 읽은 후에는 이러한 새로운 기능을 보여주기 위해 동일한 프로그램에 예제를 작성하기를 기다릴 수 없었습니다.
이전에 쓴 HTML 5 예를 살펴보면이 새로운 HTML5 기능을 훨씬 더 기괴한 방식으로 드릴 수있는 간단하지만 적용 가능한 예제를 작성하려고 생각합니다. 저의 목표는 단순히 이러한 HTML 5 API를 보여주는 것이 아니라 예제를 사용하여 개발자에게 실용적이고 혁신적인 방식으로 이러한 API를 진정으로 구현하는 방법을 알려주는 것입니다.
90 년대 중반, 나는 소프트웨어 특허를 등록했는데, 이는 "웹 포스트 IT 노트"였습니다. 가장 간단한 방식으로 설명하려면 실제 생활에서 컴퓨터 모니터에 고정 된 효과와 마찬가지로 웹 페이지에 고수하는 "노란색 Post-IT 노트"를 만들 수 있습니다. HTML5의 컨텐츠 편집 기능 및 LocalStorage 함수는 웹 포스트트를 빠르고 쉽게 만들 수 있습니다!
프로그램 사용 방법을 보여줍니다.
마우스와 함께 포스트잇 메모의 영역을 클릭하고 정보를 입력하십시오. 이 프로그램은 입력 한 모든 정보를 로컬 스토리지 (쿠키가 아닌)에 저장합니다. 이 페이지를 다시 방문하면 Post-IT 메시지는 지난번에 쓴 내용을 기억합니다. 브라우저는 HTML5를 완전히 구현할 필요가 없습니다.
LocalStorage를 구현하는 주요 방법은 다음과 같이 간단합니다.
| 함수 stoyUserscribble (id) { var scribble = document.getElementById (& rsquo; scribble & rsquo;). InnerHtml; localstorage.setitem (& rsquo; userscribble & rsquo;, scribble); } 함수 getUserscribble () { if (localStorage.getItem (& rsquo; userscribble & rsquo;)) { var scribble = localstorage.getItem (& rsquo; userscribble & rsquo;); } 또 다른 { var scribble = & lsquo ; < font color = & rdquo ; arial & rdquo ; 입력 한 정보를 기억합니다! < / i & gt; < / font > & rsquo ;; } document.getElementById (& rsquo; scribble & rsquo;). innerhtml = scribble; } |
<TD>에 내 컨텐츠 편집 가능한 속성 및 ONKEYUP 이벤트를 배치하기로 결정했습니다.
| < & rdquo ; |
예제의 전체 HTML 코드는 여기에서 다운로드 할 수 있습니다.
이 예에서 포스트 IT는 확장 가능합니다. Post-IT-IT를 작성하여 웹 페이지에 배치하여 웹 사이트 나 웹 앱에 흥미로운 기능을 추가합니다.
영어 출처 : HTML5- 콘텐츠 및 로컬 스터리지의 코드 예제 - 웹 스티커 메모를 만듭니다!