<!DOCTYPE html>
<html><head> <meta charset="UTF-8"> <title>Web Storage之简易留言板</title> <style type="text/css"> :root{ margin: 5px; } textarea{ width:100%; height:200px; } .liuyan-container{ width: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" οnclick="addInfo()">留言</button><button id="clearInfo" class="btn btn-primary" οnclick="clearInfo()">清除</button></div></body></html>