在這篇文章裡我將研究HTML5上2個新的功能：contenteditable 和localStorage。當我看了HTML5、W3C規範說明後，我迫不及待的要在這同一個程序上寫出例子來演示這些新功能。
當你在看我前面所寫的HTML 5例子時，我正在思考創建一個簡單但又適用的例子、以一種更新奇的方式來演練這些HTML5新特性。我的目標並不是想單純的展示這些HTML 5 API，而是想用例子來告訴開發人員如何真正的以一種實用的和創新的方式實現這些API。
在九十年代中期，我曾註冊了一個軟件專利，它是一個“WEB便利貼”。用最簡單的話來描述就是，它能創建一個“黃色的便利貼”，粘在你的網頁上，就像現實生活中你貼在電腦顯示器上的效果。 HTML5的內容可編輯功能和本地存儲（localStorage）功能使創建web便利貼的功能變得快速簡單！
演示程序如何使用：
用鼠標點擊便利貼的區域，敲入信息。這個程序會把你敲入的信息都存入本地存儲裡（不是cookie裡）。當你重新訪問這個頁面時，你的便利貼信息就會記住你上次寫的內容。請記住，沒有一個瀏覽器完全實現了HTML5，這個例子需要在支持HTML5的瀏覽器上運行，比如Firefox3.5以上。
實現localStorage的關鍵方法很簡單，就像這些：
| 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 = 6 >< i >你可以在這個便利貼上隨意編寫…而且下次你再訪問我的博客時就會看到我記住了你輸入的信息！ < / i& gt;< / font > ’; } document.getElementById(’scribble’).innerHTML = scribble; } |
我選擇在<td>上放置我的內容可編輯屬性和onkeyup事件：
| < td background =”” contenteditable =”true” id =”scribble” onkeyup =”storeUserScribble(this.id)” ></ td > |
例子中完整的HTML代碼可以點擊這裡下載。
在這個例子中，便利貼是可以縮放的。創建一個小便利貼，把它放在你的web網頁上，這給你的網站或web應用增添了一個有趣的功能。
英文出處：HTML5 - code example of ContentEditable and LocalStorage - create a web sticky note！