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

最新推荐文章于 2023-04-03 19:48:52 发布

打不死滴小强

最新推荐文章于 2023-04-03 19:48:52 发布

阅读量9.8k

点赞数 2

分类专栏： html5/css相关文章标签： html5 数据存储数据存储

本文链接：https://blog.csdn.net/u012859748/article/details/52514768

版权

html5/css相关专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本篇结合存储保存数据简要介绍数据保存、读取、清除的一个小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');
}

附图：

打不死滴小强

关注

2
点赞
踩
22

收藏

觉得还不错? 一键收藏
6
评论
html5基于数据存储的评论&留言板demo

本篇结合存储保存数据简要介绍数据保存、读取、清除的一个小demo。简单的留言板简单的评论/留言板 js：function saveStorage(id) { var data = document.getElementById(id).value; var time = new Date().getTim
复制链接

扫一扫