基于web storage的客户端留言板

信念随梦

820人浏览 · 2016-05-05 21:38:37

信念随梦 · 2016-05-05 21:38:37 发布

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>客户端留言板</title>
</head>

<body>
	<h2>客户端留言板</h2>
    留言标题：<input id = "title" name = "title" type = "text" size = "60"/><br/>
    留言信息：<textarea id = "content" name="content" cols="50" rows="8"></textarea><br/>
    留言人：<input id="user" name="user" type="text"/><br/>
    <input type="button" value = "添加留言" onclick="addMsg();"/>
    <input type="button" value = "清除留言" onclick="clearMsg();"/>
    <br/>
    <table  style="width:750;border:1px solid #ccc">
    	<tr>
        	<th>留言标题</th>
            <th>留言内容</th>
            <th>留言人</th>
            <th>留言时间</th>
 		</tr>
        <tbody id="show"></tbody>
   </table>
   <script type="text/javascript">
   		var loadMsg = function(){
			var tb = document.getElementById("show");
			tb.innerHTML = "";
			for(var i = 0;i<localStorage.length;i++){
				var key = localStorage.key(i);
				var date = new Date();
				date.setTime(key);
				var datastr = date.toLocaleDateString()+" "+date.toLocaleTimeString();
				var msgStr = localStorage.getItem(key);
				var msg = JSON.parse(msgStr);
				//msg.datastr = datastr;
				var row = tb.insertRow(i);
				row.insertCell(0).innerHTML = msg.title;
				row.insertCell(1).innerHTML = msg.content;
				row.insertCell(2).innerHTML = msg.user;
				row.insertCell(3).innerHTML = datastr;//msg.datastr;
				}
			}
		var addMsg = function(){
			var titleElement = document.getElementById("title");
			var contentElement = document.getElementById("content");
			var userElement = document.getElementById("user");
			if((titleElement.value.trim()== '')||(contentElement.value.trim() == '')||(userElement.value.trim() == '')){
				alert("数据不能为空");
				loadMsg();}
			else{
			var msg = {
				title:titleElement.value,
				content:contentElement.value,
				user:userElement.value
				}
				var time =  new Date().getTime();
				localStorage.setItem(time,JSON.stringify(msg));
				titleElement.value = "";
				contentElement.value = "";
				userElement.value = "";
				alert("数据已经保存。");
				loadMsg();
				}
			}
			function clearMsg(){
				localStorage.clear();
				alert("全部信息已被清除。");
				loadMsg();
				}
				window.onload = loadMsg();
	</script>
</body>
</html>

本文是疯狂js讲义课本的一个例子