HMTL5 Web存储的localStorage的使用实例【图文说明】

5G时代 · 发表于 2012-12-22 20:44:41

<div id="cnblogs_post_body">使用HTML5 Web存储的localStorage方式进行编写一个Web页面。
功能是一个简易的Web留言板。留言板信息可以永久保存。并能清楚留言板内容。参考页面如下图：

<div class="cnblogs_code"><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> textarea { width: 500px; height: 200px; } </style></head><body> <div> <h2>简单的web存储留言板</h2> <textarea id="t1"></textarea> <br /> <input type="button" class="button" onclick="addInfo()" value="留言" /> <input type="button" class="button" onclick="cleanInfo()" value="清除留言" /> <br /> <hr /> <label id="shows"></label> <textarea id="show" readonly="readonly"></textarea> </div> <script type="text/javascript"> //使用HTML5 Web存储的localStorage方式进行编写一个Web页面。 //功能是一个简易的Web留言板。留言板信息可以永久保存。并能清楚留言板内容。参考页面如下图： function upInfo() { var lStorage = window.localStorage; var show = window.document.getElementById("show"); if (window.localStorage.myBoard) { show.value = window.localStorage.myBoard; } else { var info = "还没有留言"; show.value = "还没有留言"; } } function addInfo() { var info = window.document.getElementById("t1"); var lStorage = window.localStorage; if (lStorage.myBoard) { var date = new Date(); lStorage.myBoard += t1.value + "\n发表时间：" + date.toLocaleString() + "\n"; } else { var date = new Date(); lStorage.myBoard = t1.value + "\n发表时间：" + date.toLocaleString() + "\n"; } upInfo(); } function cleanInfo() { window.localStorage.removeItem("myBoard"); upInfo(); } upInfo(); </script></body></html>

		自动登录	找回密码
密码			立即注册