<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Storage之简易留言板</title>
<style type="text/css">
:root{
margin: 5px;
}
textarea{
100%;
height:200px;
}
.liuyan-container{
100%;
}
.well{
position: fixed;
top:20px;
left:40%;
}
.fbsj{
font-size:12px;
}
</style>
</head>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<link rel='stylesheet' href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript">
//var ws = sessionStorage;
var ws = window.localStorage;
var randomImg = "rar.png";
function addInfo(){
var liuyan = $("#liuyan");//为啥定义成全局变量为undefined?
if(liuyan.val()==""){
}
var media = '<div class="media"><div class="media-left"><img src=images/"+randomImg+"></div><div class="media-body"></div></div>';
var date = new Date();
var text = '<div class="media"><div class="media-left"><img src="images/rar.png"></div>' +
'<div class="media-body">'+liuyan.val()+"<br/> <span class='fbsj'>发表时间："+date.toLocaleString()+'</span></div></div>'
if(ws.MYBOARD){
ws.MYBOARD += text;
}else{
ws.MYBOARD = text;
}
showInfo();
}
function showInfo(){
var showliuyan = $("#showliuyan");
showliuyan.html( ws.MYBOARD );
}
function clearInfo(){
// ws.clear();
ws.removeItem("MYBOARD");
var showliuyan = $("#showliuyan");
showliuyan.html("");
$("#liuyan").val("");
}
window.onload = function(){
showInfo();
}
</script>
<body >
<div class="well">Web Storage之简易留言板</div>
<div class="row col-xs-6" id="showliuyan">
</div>
<hr>
<textarea name="readTextArea" id="liuyan" placeholder="到此一游"></textarea>
<div class="btn-group pull-right">
<button id="addInfo" class="btn btn-success" onclick="addInfo()">留言</button>
<button id="clearInfo" class="btn btn-primary" onclick="clearInfo()">清除</button>
</div>
</body>
</html>