本篇结合存储保存数据简要介绍数据保存、读取、清除的一个小demo。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的留言板</title>
<script type="text/javascript" src="../js/index2.js"></script>
</head>
<body>
<h1>简单的评论/留言板</h1>
<textarea id="demo" cols="50" rows="10"></textarea><br/><br/>
<input type="button" value="保存" οnclick="saveStorage('demo');" />
<input type="button" value="清空" οnclick="clearStorage('msg');" />
<input type="button" value="读取" οnclick="loadStorage('msg');" />
<hr color="red">
<p id="msg"></p>
</body>
</html>
js:
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 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>' + '这是第'+ i + '条数据 </td><td>' + value + '</td><td>' + datestr + '</td></tr>';
}
result += '</table>';
var target = document.getElementById(id);
target.innerHTML = result;
}
function clearStorage(id) {
localStorage.clear();
alert("数据已经被成功删除了!");
loadStorage('msg');
}
附图: