您的位置：首页 > Web前端 > HTML5

html5基于数据存储的评论&留言板demo

2016-09-12 16:41 302 查看

本篇结合存储保存数据简要介绍数据保存、读取、清除的一个小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="保存" onclick="saveStorage('demo');" /> 
<input type="button" value="清空" onclick="clearStorage('msg');" /> 
<input type="button" value="读取" onclick="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');
}

附图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 数据存储数据存储

相关文章推荐

新的分享

章节导航