简单的留言板

步骤

简单的留言板

代码

<!DOCTYPE html>
<html>
	<head>
		<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')"/>
		<p id="msg"></p>
	</body>

function saveStorage(id){
	var data = document.getElementById(id).value;
	var time = new Date().getTime();
	localStorage.setItem(time,data);
	alert("数据已经被保存");
	localStorage('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("数据已被成功删除");
	localStorage('msg');
}