首页 > 代码库 > 用HTML5 Web Storage作一个简易聊天室
用HTML5 Web Storage作一个简易聊天室
前 言：
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个人博客：唯爱品傲 也帮我践踏下吧。访问量比我薪水还少
后言：
反正也没人看。我就乱写一通了。老板还有后边盯着我看呢。
好担心被革职呀。
文采不好，没读过书！请勿见笑。勿喷！
有心关注下我的公众微信号：好友记 我也不知道为什么起了这个名字。
用HTML5 Web Storage作一个简易聊天室
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。