【发布时间】：2015-07-28 11:14:57
【问题描述】：
<!DOCTYPE HTML>
<html>
<head>
<title>1</title>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
var chatCount, nBuffer, tBuffer, cBuffer;
nBuffer = [""];
tBuffer = [""];
cBuffer = [""];
nHBuffer = [""];
tHBuffer = [""];
cHBuffer = [""];
if(localStorage.chatCount == undefined){
localStorage.chatCount = 0;
chatCount = localStorage.chatCount;
}else{
chatCount = localStorage.chatCount;
}
//start of the part malfunctioning
for(i=1;i<=chatCount;i++){
nHBuffer[i] = document.createElement('p');
tHBuffer[i] = document.createElement('p');
cHBuffer[i] = document.createElement('p');
nHBuffer[i].className = "chatUser";
tHBuffer[i].className = "chatTime";
cHBuffer[i].className = "chatContent";
nHBuffer[i].innerHTML = localStorage.getItem("cUser"+i);
tHBuffer[i].innerHTML = localStorage.getItem("cTime"+i);
cHBuffer[i].innerHTML = localStorage.getItem("cContent"+i);
document.getElementById("box").appendChild(nHBuffer[i]);
document.getElementById("box").appendChild(tHBuffer[i]);
document.getElementById("box").appendChild(cHBuffer[i]);
document.getElementById("box").appendChild(document.createElement("br"));
}
//end of part malfunctioning
var currentCount = chatCount+1;
function sendChat(){
var cUser = sessionStorage.currentUser;
var cTime = new Date();
cTime = cTime.toLocaleString();
var cContent = document.getElementById("chatField").value;
document.getElementById("chatField").value = "";
localStorage.setItem("cUser"+currentCount,cUser);
localStorage.setItem("cTime"+currentCount,cTime);
localStorage.setItem("cContent"+currentCount,cContent);
nBuffer[currentCount] = document.createElement('p');
tBuffer[currentCount] = document.createElement('p');
cBuffer[currentCount] = document.createElement('p');
nBuffer[currentCount].className = "chatUser";
tBuffer[currentCount].className = "chatTime";
cBuffer[currentCount].className = "chatContent";
nBuffer[currentCount].innerHTML = localStorage.getItem("cUser"+currentCount);
tBuffer[currentCount].innerHTML = localStorage.getItem("cTime"+currentCount);
cBuffer[currentCount].innerHTML = localStorage.getItem("cContent"+currentCount);
document.getElementById("box").appendChild(nBuffer[currentCount]);
document.getElementById("box").appendChild(tBuffer[currentCount]);
document.getElementById("box").appendChild(cBuffer[currentCount]);
document.getElementById("box").appendChild(document.createElement("br"));
chatCount++;
localStorage.chatCount = chatCount;
currentCount++;
}
function clearLS(){
localStorage.clear();
}
//JQuery division
$(document).ready(function(){
});
</script>
<style>
.wrapper{
border:2px black solid;
padding: 40px;
width: 60%;
background-color: #F7F7F7;
margin: 0 auto 10px;
border-radius: 2px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
body{
position:absolute;
left:0px;
right:0px;
}
.title{
font-family:sans serif;
font-weight: 100;
text-align: center;
font-size: 2.3em;
}
.usubmit {
width: 10%;
display: block;
margin-bottom: 10px;
position: relative;
height:width;
border: 0px;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #4d90fe;
height:44px;
font-size:1.5em;
}
.usubmit:hover{
border: 0px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
}
#chatField, #box{
height: 44px;
font-size: 16px;
width: 90%;
margin-bottom: 10px;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
/* border-radius: 2px; */
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#chatField{
width:80%;
}
#chatField:hover{
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
#box, #chatField, .usubmit{
float:left;
}
#box{
clear:both;
height:700px;
overflow:scroll;
}
p{
padding: 5px;
margin: 0px;
}
.chatUser{
font-weight: bold;
font-family:sans serif;
font-size:1.2em;
}
.chatTime{
color: gray;
font-family:sans serif;
}
.chatContent{
font-family:sans serif;
}
</style>
</head>
<body>
<div class="wrapper">
<h1 class="title">ChatRoom</h1>
<div class="chatBox" id="box">
</div>
<input type="textfield" id="chatField" class="" />
<input type="button" value="SEND" id="" class="usubmit" onclick="sendChat();" />
<input type="button" value="SEN" id="" class="usubmit" onclick="clearLS();" />
</div>
</body>
</html>
这是我作为项目工作的网站的代码。我想建立一个基于 localstorage 和 javascript 的简单聊天室，因为该项目禁止使用所有服务器端语言（反正我也没学过）。
但是我的所有代码都可以正常工作，除了我实现它以检索存储的聊天历史记录的部分（在单击发送按钮时完成）。基本上我认为 sendChat 函数工作正常，因为我故意检索存储在函数中的 localStorage 项目以附加到显示的 div 中。但是我用它来检索加载页面时存储的聊天历史记录的部分不起作用。有人可以为我识别并修复错误吗？谢谢。
PS。 currentUser 是在另一个页面上使用 sessionStorage 声明的，但由于我没有将其包含在此页面中，因此在测试程序时将其保留为未定义。谢谢。 :)
【问题讨论】：
-
附言。关于部分故障，我实际上试图自己调试它，但我要么在我将它附加到显示 div 的行中得到“无法读取属性'appendChild'为空”错误，要么在检查元素界面中没有错误但没有也获得了预期的结果。
-
问题是你的脚本在头中，它会在元素加载到 dom 之前被执行，所以在 for 循环中
document.getElementById("box")不会返回任何东西 -
呃...所以我必须将脚本放在“box”div 之后的正文中？ @ArunPJohny
-
是的...把它放在
body的结束标记之前 -
但是既然你用的是jQuery，为什么不用jQuery来做dom操作
标签： javascript jquery local-storage appendchild session-storage