使用localStorage写一个留言板

前面我们学习localStorage的使用方法!~现在我们就用它来做一个简单的留言板,主要是使用localStorage来存储数据!~其实主要的方法我们都是学习过的,现在就使用它来做一个留言板!~

现在我们输入代码:

——————————————————————————————–

<!DOCTYPE HTML>
<html>
<head>
<title>web storage的范例—localStorage的使用</title>
<meta charset=”UTF-8″>
<script type=”text/javascript”>
function saveStorage(id){
var data=$(id).value;
var time=new Date().getTime();
localStorage.setItem(time,data);
alert(“保存成功!·”);
loadStorage(‘msg’);
}

function loadStorage(id){
var result=’<table style=”border:1px solid red;width:860px;”>’;
for(var i=0;i<localStorage.length;i++){
var key=localStorage.key(i);
var value=localStorage.getItem(key);
var date=new Date();
date.setTime(key);
var datestr=date.toGMTString();
result+=’<tr style=”border:1px solid red;”><td>’+value+’</td><td>’+datestr+’</td></tr>’;
}
result+=’</table>’;
var target=$(id);
target.innerHTML=result;
}

function clearStorage(){
localStorage.clear();
alert(“全部数据被清除”);
loadStorage(‘liuyan’);
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<h1>web留言本的实例</h1>
<textarea id=”liuyan” cols=”60″ rows=”10″></textarea><br>
<input type=”button” value=”追加” onclick=”saveStorage(‘liuyan’);”/>
<input type=”button” value=”初始化” onclick=”clearStorage(‘msg’)”/>
<hr/>
<p id=”msg”></p>
</body>
</html>

——————————————————————————————————

效果截图:

演示地址:http://www.cangzhang.com/wp-content/uploads/2012/08/web_liuyanben.htm

 

共有 0 条评论

Top