用HTML5 Web Storage作一个简易聊天室

浏览数：44 / 时间：2015年06月09日

前言：

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>