html,css,js,简单的网页留言板

效果如图：

html5留言板源代码 留言板网页html代码_html

实现代码如下：

html代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>简单的网页留言板</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
<h1>简单的网页留言板</h1>
<textarea id="dome" cols="60" rows="10"></textarea>
<br/>
<input type="button" value="保存" onclick="saveStorage('dome');">
<input type="button" value="清空" onclick="clearStorage('msg');">
<input type="button" value="读取" onclick="loadStorage('msg');">
<hr>
<p id="msg"></p>
</body>
</html>

 

index.js代码：

///**
// * Created by Administrator on 2014/11/27.
// */
//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 reselt = '<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();
//        reselt += '<tr><td>'+'这是第'+i+'条数据</td><td>'+value+'</td><td>'+datestr+'</td></tr>';
//    }
//    reselt += '</table>';
//    var target = document.getElementById(id);
//    target.innerHTML = reselt;
//}
//function clearStorage(id){
//    localStorage.clear();
//    alert("数据已经被成功删除！");
//    loadStorage('msg');
//}
/**
 * Created by Administrator on 2014/11/27.
 */
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 reselt = '<table border="1">';
    for(var i=0;i<localStorage.length;i++)
    {
        var value = localStorage.getItem( localStorage.key(i));
        var date = new Date();
        date.setTime( localStorage.key(i));
        var datestr = date.toGMTString();
        reselt += '<tr><td>'+'这是第'+i+'条数据</td><td>'+ localStorage.getItem( localStorage.key(i))+'</td><td>'+datestr+'</td></tr>';
    }
    reselt += '</table>';
    var target = document.getElementById(id);
    target.innerHTML = reselt;
}
function clearStorage(id){
    localStorage.clear();
    alert("数据已经被成功删除！");
    loadStorage('msg');
}