用WebStorage做一个留言本

最新推荐文章于 2018-03-17 15:06:05 发布

原创最新推荐文章于 2018-03-17 15:06:05 发布 · 358 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的Web留言本实现方案，使用HTML、CSS和JavaScript进行前端开发，并利用localStorage存储留言数据，实现数据的持久化。文章展示了如何通过按钮操作来追加留言及清除所有留言记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<title>Web留言本</title>
<meta charset=utf-8">
<script type="text/javascript">
function saveStorage(id) {
var data = document.getElementById(id).value;
var time = new Date().getTime();
localStorage.setItem(time,data);
alert("数据已经保存.");
loadStorage('msg');
}
function loadStorage(id) {
var result ='<table border="1">';
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><td>'+ value +'</td><td>'+ datestr + '</td></tr>';

}
result +='</table>';
var target = document.getElementById(id);
target.innerHTML = result;
}
function clearStorage() {
localStorage.clear();
alert("全部数据已清除.");
loadStorage('msg');
}
</script>
</head>
<body>
<h1>Web留言本</h1>
<textarea id="memo" cols="60" rows="10"></textarea><br>
<input type="button" value="追加" onclick="saveStorage('memo');">
<input type="button" value="初始化" onclick="clearStorage('msg');">
<hr>
<p id="msg"></p>
</body>
</html>