html5 打造桌面便签,HTML5 – 创建一个Web网页便利贴

在我之前的博客里，我给大家分享了HTML5上拖拽功能的例子。在这篇文章里我将研究HTML5上2个新的功能:contenteditable  和 localStorage。当我看了 HTML5、W3C规范说明后，我迫不及待的要在这同一个程序上写出例子来演示这些新功能。

当你在看我前面所写的HTML 5例子时，我正在思考创建一个简单但又适用的例子、以一种更新奇的方式来演练这些HTML5新特性。我的目标并不是想单纯的展示这些HTML 5 API，而是想用例子来告诉开发人员如何真正的以一种实用的和创新的方式实现这些API。

在九十年代中期，我曾注册了一个软件专利，它是一个“WEB便利贴”。用最简单的话来描述就是，它能创建一个“黄色的便利贴”，粘在你的网页上，就像现实生活中你贴在电脑显示器上的效果。HTML5的内容可编辑功能和本地存储(localStorage)功能使创建web便利贴的功能变得快速简单！

演示程序如何使用：用鼠标点击便利贴的区域，敲入信息。这个程序会把你敲入的信息都存入本地存储里(不是cookie里)。当你重新访问这个页面时，你的便利贴信息就会记住你上次写的内容。请记住，没有一个浏览器完全实现了HTML5，这个例子需要在支持HTML5的浏览器上运行，比如Firefox3.5以上。

下面就是我的例子截图(点击，然后输入你的信息！具体效果可以下载附件测试)：

　　实现localStorage的关键方法很简单，就像这些：

functionstoreUserScribble(id){varscribble=document.getElementById(’scribble’).innerHTML;

localStorage.setItem(’userScribble’,scribble);

}functiongetUserScribble(){if( localStorage.getItem(’userScribble’)){varscribble=localStorage.getItem(’userScribble’);

}else{varscribble=‘你可以在这个便利贴上随意编写…而且下次你再访问我的博客时就会看到我记住了你输入的信息！’;

}

document.getElementById(’scribble’).innerHTML=scribble;

}

我选择在

上放置我的内容可编辑属性和onkeyup事件：

例子中完整的HTML代码可以点击这里下载。

在这个例子中，便利贴是可以缩放的。创建一个小便利贴，把它放在你的web网页上，这给你的网站或web应用增添了一个有趣的功能。