前 言：
2个月前为了一个评论让我潜水(潜伏)博客园2年作了一次艰难的决定。注册了一个账号！
没事瞎逛博客园以及其他技术网站,发现一个不错的留言墙。就看了其中使用的技术。呀！惊呆了。居然是HTML5，完全没接触过呀！
再 言：
所以就搜了博客园相关文档，有如下信息：
@#$^%&*(
$&^^**(&(
http://zzk.cnblogs.com/s?t=b&w=html5%20Storage
#$%&^&*(
%*(&()*%$
资料太多了,你也不会细看的。
在HTML5中重新提供了一种在客户端本地保存数据的功能，它就是Web Storage功能。
Web Storage 分两种：sessionStorage 随着浏览器闭关而清除 localStorage 永久保存
想用体验了一下HTML5 Web Storage 作一个简易的聊天室，非常简单
直接看例子吧：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>html5 Storage</title>
<script type="text/javascript">
function showTime(){
var tDate = new Date();
var tseconds = tDate.getSeconds();
if (tseconds < 10)
tseconds = ‘0‘ + tseconds;
var timeStr = ‘ NowTime: ‘+ tDate.getFullYear()+‘/‘+ (tDate.getMonth()+1)+‘/‘+ tDate.getDate()+‘ ‘+ tDate.getHours() + ‘:‘ + tDate.getMinutes() + ‘:‘ + tseconds;
document.getElementById(‘time‘).innerHTML = timeStr;
msg.innerHTML = ‘‘;
var dom = ‘‘;
for (var i = 0, len = localStorage.length; i < len; i++) {
dom += ‘<div>‘ + localStorage.getItem(localStorage.key(i)) + ‘</div>‘
}
if(localStorage.length>20){
localStorage.removeItem(localStorage.key(0));
}
msg.innerHTML = dom;
setTimeout(showTime, 1000);
}
</script>
</head>
<body onload="showTime()">
<script type="text/javascript" src="http://counter.sina.com.cn/ip/" charset="gb2312"></script>
<h1>
Web Storage(简单聊天室) 实验</h1>
<div id="content">
<div id="time">刷新</div>
</div>
<div id="msg" style="margin: 10px 1; border: 2px solid pink; padding: 10px; width: 540px;min-height: 200px;"></div>
内容
<input type="text" onkeydown="enterSumbit()" id="text" />
<!--<input type="text" id="kop" />
姓名-->
<button onclick="save();">
留言</button>
<button onclick="_clear();">
清空聊天记录</button>
<script type="text/javascript">
function enterSumbit(){
var event=arguments.callee.caller.arguments[0]||window.event;//消除浏览器差异
if (event.keyCode == 13){
save();
}
}
</script>
<script type="text/javascript">
function save() {
var msg = document.getElementById(‘msg‘);
//kop = document.getElementById(‘kop‘);
var text = document.getElementById(‘text‘).value;
if(text ==""){
text="我靠( ‵o′)凸 好像忘记说话了...";
}else{
text=text;
}
var str = "来自"+ ILData[2]+"(" +‘<font color=bule>‘+ ILData[0]+‘</font>‘+")" /**+ kop.value**/ +"说:" + ‘<font color=red>‘+ text + ‘</font>‘ ;
var k = new Date().getTime();
localStorage.setItem(k, str);
init();
}
function init() {
var txt1=document.getElementById("text");
txt1.value="";
txt1.focus();
if(localStorage.length>20){
localStorage.removeItem(localStorage.key(0));
}
msg.innerHTML = ‘‘;
var dom = ‘‘;
for (var i = 0, len = localStorage.length; i < len; i++) {
//dom += ‘<div>‘ + localStorage.key(i) + ‘:‘ + localStorage.getItem(localStorage.key(i)) + ‘</div>‘
dom += ‘<div>‘ + localStorage.getItem(localStorage.key(i)) + ‘</div>‘
}
msg.innerHTML = dom;
}
function _clear() {
msg.innerHTML = ‘‘;
localStorage.clear();
}
</script>
</body>
</html>
也可以体验下：使劲点击我吧（用新浪的sae弄了几个小应用，感谢感谢！）
没事瞎整的wp个人博客：唯爱品傲 也帮我践踏下吧。访问量比我薪水还少
后言：
反正也没人看。我就乱写一通了。老板还有后边盯着我看呢。
好担心被革职呀。
文采不好，没读过书！请勿见笑。勿喷！
有心关注下我的公众微信号：好友记 我也不知道为什么起了这个名字。
时间： 2024-11-05 11:32:20