この記事では、HTML5 の 2 つの新機能、contenteditable と localStorage について検討します。 HTML5 と W3C の仕様を読んだ後、これらの新機能をデモンストレーションするために同じプログラムでサンプルを作成するのが待ちきれませんでした。
私が以前に書いた HTML 5 の例を見ていただいている間、私はこれらの新しい HTML5 機能をより斬新な方法で実行するための、単純だが適用可能な例を作成することを考えていました。私の目標は、これらの HTML 5 API を単にデモンストレーションすることではなく、サンプルを使用して、これらの API を実践的かつ革新的な方法で実際に実装する方法を開発者に示すことです。
1990年代半ばに「WEB付箋」というソフトウェアの特許を登録しました。最も簡単な言葉で説明すると、現実世界のコンピューターのモニターに貼り付けられるのと同じように、Web ページに貼り付く「黄色の付箋」を作成できます。 HTML5 のコンテンツ編集機能とローカル ストレージ機能により、Web 付箋をすばやく簡単に作成できます。
プログラムの使用方法のデモンストレーション:
マウスを使用して付箋領域をクリックし、情報を入力します。このプログラムは、入力したすべての情報をローカル ストレージ (Cookie ではなく) に保存します。このページに再度アクセスすると、ポストイット情報は前回書いた内容を記憶しています。 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 = ' < font color = blue face = ”Geneva, Arial” size = 6 >< i >この付箋に好きなことを書いてください...そして、次に私のブログを訪問するときに私がそれを覚えているのがわかります。入力した情報！ < / / i& gt; < / font > ';
}
document.getElementById('scribble').innerHTML =スクリブル;
}
content editable 属性と onkeyup イベントを <td> に配置することにしました。
| < td background =”” contenteditable =”true” id =”scribble” onkeyup =”storeUserScribble(this.id)” ></ td > |
例の完全な HTML コードは、ここからダウンロードできます。
この例では、付箋はサイズ変更可能です。小さな付箋を作成して Web ページに配置すると、Web サイトまたは Web アプリケーションに興味深い機能が追加されます。
英語出典: HTML5 - ContentEditable と LocalStorage のコード例 - Web 付箋を作成しよう!