客户端本地存储数据(简单的web留言本)

最新推荐文章于 2023-11-25 14:15:35 发布

LPLIFE

最新推荐文章于 2023-11-25 14:15:35 发布

阅读量777

点赞数

分类专栏： JavaScript HTML

本文链接：https://blog.csdn.net/LPLIFE/article/details/79558615

版权

JavaScript 同时被 2 个专栏收录

76 篇文章

订阅专栏

HTML

7 篇文章

订阅专栏

 
 简单的web留言本功能: 

 
  在文本区域中输入留言信息,单击"添加"按钮后,将文本域中的数据保存到 

 
 localStorage中,并且在表单下部会显示出所有的留言信息,单机"全部清除"按钮,文本域中的数据以及localStorage中保留的数据全部被清除. 

如下图:

 
 主要知识点:  

 
 1.localStorage 

 
 length:所有保存在localStorage中的数据的条数 

 
 key(index):将想要得到数据的索引号作为index参数传入,可以得到localStorage中与这个索引号对应的数据. 

 
 2.存储数据的方式:键值对形式 

 
 键的确定方法:每留言一条信息添加的时间是唯一的. 

 
 localStorage的方法:setItem(),getItem(),clear() 

 
 3.存储 

 
  使用setItem()方法可以存储值 

 
  语法: 
 localStorage. 
 setItem(key,value) 

 
 4.取值 

 
  使用getItem()方法可以读取指定键名的值 

 
  语法: 
 localStorage. 
 getItem(key,value) 

 
 5.清空本地存储 

 
  使用clear()可以清空所有本地存储的键值对 

 
  语法: 
 localStorage. 
 clear() 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>web留言本</title>
<script type="application/javascript">
	
function save(id){
	var data = document.getElementById(id).value;
	var time = new Date().getTime();
	localStorage.setItem(time,data);
	loadStorage('msg');
	
}
function loadStorage(id){
	var result = '<table border="1" cellspacing="0">';
	for(var i = 0 ; i < localStorage.length;i++){
		var key = localStorage.key(i);
		var value = localStorage.getItem(key);
			var date = new Date();
		date.setTime(date);
		var datestr = date.toGMTString();
		result += '<tr><td>'+value+'</td><td>'+datestr  +'</td></tr>';
	}
	 result += '<table>';
	var target = document.getElementById(id);
	target.innerHTML = result;
}
function clearStorage(){
 	localStorage.clear();
 	loadStorage('msg');
}


</script>
</head>
<body>
	<center>
		<h1>web留言板</h1>
		<textarea rows="10" cols="100" id="textA"></textarea>
		<br> <input id="but" value="添加" onClick="save('textA')"
			type="button"> <input id="clear" value="全部清除"
			onClick="clearStorage('msg')" type="button">
		<p id="msg"></p>
	</center>
</body>
</html>

 
 如下图: 