基于localStorage储存实现网页版简单电话簿

最新推荐文章于 2024-09-03 20:51:23 发布

爱娶媳妇的苗同学

最新推荐文章于 2024-09-03 20:51:23 发布

阅读量1k

点赞数

分类专栏： Web前端文章标签： localStorage储存

本文链接：https://blog.youkuaiyun.com/weixin_44609873/article/details/96483041

版权

Web前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个基于HTML和JavaScript的简易电话簿程序，利用localStorage存储和检索联系人信息。支持添加新联系人、按姓名查找电话及展示所有记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网站列表程序实现以下功能：

可以输入姓名，电话，以姓名作为key存入localStorage；
根据姓名，查找电话；
列出当前已保存的所有电话

效果如下：

添加联系人记录：

查找效果：

记录效果：

具体代码实现如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页电话薄localStorage简单网站列表输入储存查询程序</title>
	</head>
	<body>
		<div style="border: 2px dashed #CCC; width: 320px; margin-left: auto; margin-right: auto;">
			<label for="name">姓名（Name）：</label>
			<input type="text" id="name" name="name" class="text" />
			<br />
			<label for="telphone" >电话号码（Tel）：</label>
			<input type="text" id="telphone" name="telphone" />
			<br />
			<input type="button" onclick="save()" value="新增记录" />
			<hr />
			<label for="search_name">输入姓名：</label>
			<input type="text" id="search_name" name="search_name" />
			<input type="button" onclick="find()" value="查找电话" />
			<p id="find_tel"><br></p>
			</div>
			<br /><br /><br />
			<div id="list" style="border:2px dashed #CCC; width:320px;margin-left: auto; margin-right: auto;"></div>
	</body>
	<script type="text/javascript">
		//方法声明，载入所有储存在localStorage中的数据
		loadAll();
		//储存联系人姓名、电话信息到localStorage
		function save(){
			var telphone = document.getElementById("telphone").value;
			var name = document.getElementById("name").value;
			localStorage.setItem(name,telphone);
			alert("添加成功！");
		}
		//根据姓名搜索电话号码记录并显示
		function find(){
			var search_name = document.getElementById("search_name").value;
			var phonenumber = localStorage.getItem(search_name);
			var find_tel = document.getElementById("find_tel");
			find_tel.innerHTML = search_name +"电话号码是：" +phonenumber;
			
		}
		//将所有储存在localStorage中的对象提取出来,并展现到网页界面上
		function loadAll(){
			var list = document.getElementById("list");
			if(localStorage.length>0){
				var result = "<table border='1'>";
				//定义行表格 Name Tel
				result += "<tr><td>Name</td><td>Tel</td></tr>";  
				for(var i=0;i<localStorage.length;i++){
					var name = localStorage.key(i);
					var telphone = localStorage.getItem(name);
					result += "<tr><td>" +name +"</td><td>" +telphone +"</td></tr>";
				}
				//完成每行表格结束标志
				result += "</table>";  
				list.innerHTML = result;  
			} else {
				list.innerHTML = "数据为空......";
			}
		}
	</script>
</html>