HTML-Storage留言板

最新推荐文章于 2021-06-07 18:35:35 发布

早日退休过上不劳而获生活

最新推荐文章于 2021-06-07 18:35:35 发布

阅读量413

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_34216631/article/details/78668877

版权

HTML 专栏收录该内容

37 篇文章 3 订阅

订阅专栏

/* 
*Copyright (c) 2017，烟台大学计算机学院 
All rights reserved. 
*文件名称：关于HTML的练习 
*作 者：张晴晴 
*完成日期：2017年11月29日 
*版 本 号：v1.0 * 
*问题描述：HTML5-JavaScript 
*输入描述： 无 
*程序输出： 无 
*/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>留言板</title>
<style>
table{
	width:500px;
	border-spacing:0;}
table,td{
	border:#F06 solid 1px;
	}
</style>
<script>

function saveStorage(){
	var data=document.getElementById("webtext").value;<!--注意使用的函数（得到一个元素，必须指明是得到它的值）-->
	var time=new Date();
	var timeForm=time.toLocaleString();<!--注意使用的函数-->
	if(window.localStorage){
		localStorage.setItem(timeForm,data);
		}
	else{
		alert("您的浏览器不支持");
		}
	show();
	}

function show(){
	var result="<table>";
	for(var i=0;i<localStorage.length;i++){
		var key=localStorage.key(i);
		var data=localStorage.getItem(key);<!--注意使用的函数，与上面进行区分，在这就为得到它的值-->
		result+="<tr><td>"+data+"</td><td>"+key+"</td></tr>"
		}
		result+="</table>";
		document.getElementById("showtable").innerHTML=result;
	}
function cleanweb(){
	localStorage.clear();
	show();
		}
</script>
</head>

<body>
<form>
<h1>简单web留言板</h1>
<textarea cols="30" rows="20" id="webtext"></textarea>
<br/>
<input type="button" value="追加" id="saveweb" onClick="saveStorage()">
<input type="button" value="初始化" id="login" onClick="cleanweb()">
<hr/>
<div id="showtable">
<!--对照着写在result中
<table>
<tr><td></td><td></td></tr>
</table>
-->
</div>
</form>
</body>
</html>