欢迎访问 如意编程网！
TAG聚合

如意编程网

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

h5-29-WEB存储-通讯录实战.html

发布时间：2022/11/16 HTML 25 老码农
如意编程网 收集整理的这篇文章主要介绍了 h5-29-WEB存储-通讯录实战.html 小编觉得挺不错的,现在分享给大家,帮大家做个参考. 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<form name="form1" method="post" action="">
			<table width="500" border="1" cellpadding="5" cellspacing="0">
				<tr>
					<td colspan="2" align="center" bgcolor="#FFFF00">通讯录</td>
				</tr>
				<tr>
					<td width="80" align="center">姓名</td>
					<td width="204"><input type="text" name="username" ></td>
				</tr>
				<tr>
					<td align="center">手机号码</td>
					<td><input type="tel" name="mobile" ></td>
				</tr>
				<tr>
					<td align="center">QQ号码</td>
					<td><input type="number" name="qq" ></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="button" name="button" >
						<input type="button" name="button5" >
						<input type="button" name="button4" >
						<input type="button" name="button3" >
						<input type="reset" value="清空">
					</td>
				</tr>
			</table>
			<br/><br/>
			<table ></table>
			<script>
				function User(username, mobile, qq) {
					this.username = username;
					this.mobile = mobile;
					this.qq = qq;
				}

				var username = document.form1.username;
				var mobile = document.form1.mobile;
				var qq = document.form1.qq;

				//查询是否存在姓名相同的人
				function hasUser() {
					for(var i = 0; i < localStorage.length; i++) {
						var key = localStorage.key(i);
						var user = localStorage.getItem(key);
						var userjson = JSON.parse(user);
						if(username.value == userjson.username) {
							return userjson;
						}
					}
					return null;
				}

				function add() {
					if(hasUser()) {
						alert("存在相同的联系人!");
						return;
					}
					if(username.value==""||username==null){
						alert("联系人不能为空！");
						return;
					}
					var user = new User(username.value, mobile.value, qq.value);
					var userStr = JSON.stringify(user);
					localStorage.setItem(username.value, userStr);
					alert("添加成功！");
				}

				function queryAll() {
					var userDiv = document.getElementById("users");
					userDiv.innerHTML="";
					if(localStorage.length>0&&localStorage!=null){
						userDiv.innerHTML="<tr><td width='200px'>联系人</td><td width='200px'>电话</td><td width='200px'>qq</td></tr>";
						for(var i = 0; i < localStorage.length; i++) {
							var key = localStorage.key(i);
							var user = localStorage.getItem(key);
							var userjson = JSON.parse(user);
							userDiv.innerHTML += "<tr><td>" + userjson.username + "</td><td>" + userjson.mobile + "</td><td>" + userjson.qq + "</td></tr>";
						}
					} else {
						userDiv.innerHTML="没有缓存联系人！";
					}
					
				function update(){
					
				}

				}
			</script>
	</body>

</html>

　　

总结

以上是如意编程网为你收集整理的h5-29-WEB存储-通讯录实战.html的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错，欢迎将如意编程网推荐给好友。