使用IndexedDB数据库实现手机通讯录管理功能

**

使用IndexedDB数据库实现手机通讯录管理功能

**
实现要求

1.创建phoneInfo数据库,创建phone对象仓库,用于保存每个用户的通讯信息。
2.手机通讯信息结构为姓名name、电话phone。
3.按钮功能:点击“添加”按钮,将用户在表单中输入的合法用户姓名和电话添加到phone对象仓库中,并同时添加到多行文本域中。点击“查询”按钮,将根据用户在姓名中输入的内容,在对象仓库中查询,并显示在“电话”对应的文本框中。点击“删除”按钮,将根据用户在姓名中输入的内容,查找对应的对象,并删除,同时自动更新下列多行文本框中的通讯录。点击“重置”按钮,将表单中输入域的内容清空。
4.页面各元素要求用HTML5的标签实现。如header、footer、tel等。

模块设计

1.创建对象仓库。

//保存一条通讯记录数据,同时显示在div中
function saveInfo(){
			var name1=$("username").value;//取姓名
			var phone1=$("userphone").value;	//取电话
			if (name1!="" && phone1!="")  //不为空处理
			{
				localStorage.setItem(name1,phone1);
				loadAllInfo();
				alert("添加成功"); 
                $("username").value="";     //添加成功后置空
                $("username").focus();      //获得焦点
			    $("userphone").value="";	//添加成功后置空
			}else{                          //姓名或电话为空,告警并获得焦点
				alert("请输入姓名和电话!");
				$("username").focus();
			}			 
		}
//div设计	
<div id="displayallinfo" name="displayallinfo">
	<textarea name="" rows="8" cols="30" id="phoneset"></textarea>
</div>

2.页面表单实现。

<form method="post" action="">
		<fieldset style="width:300px;text-align:center;">
			<legend>简易手机通讯录</legend>
			<label for="name">姓名:</label>  
			<input type="text" id="username" name="username" required/>    <br/>  
			<label for="telphone">电话:</label>  
			<input type="text" id="userphone" name="userphone" required/><br/>  
			<br>
			<input type="button" onclick="saveInfo()"    value="添加"/>			
			<input type="button" onclick="findForName()" value="查询"/>
			<input type="button" onclick="deleteName()"  value="删除"/> 			
			<input type="reset">			
			</form>

3.其他功能函数实现。

//以姓名查找通讯录信息  
		function findForName(){  
			var searchname = $("username").value;  
			var searchphone = localStorage.getItem(searchname); //取电话 
			$("userphone").value=searchphone;                   //填充电话
		}
		
//从localStorage中取出所有通讯录中信息,并展现到界面上
		function loadAllInfo(){
			// localStorage.clear();
			var result = ""; 
			if(localStorage.length>0){ 
				result += "姓名    电话\n";  
				for(var i=0;i<localStorage.length;i++){  
					var name= localStorage.key(i);  
					var phone = localStorage.getItem(name);  
					result += name+"   ---   "+phone+"\n";  
				}               
				$("phoneset").innerHTML = result;  
			}else{  
				$("phoneset").innerHTML = "通讯录为空……";  
			}  
		}
		
//删除某一条通讯信息
		function deleteName(){
            $("userphone").readonly="readonly";
			localStorage.removeItem($("username").value); //按姓名删除通讯录 
			$("userphone").value="";   //电话置空
			$("username").value="";    //姓名置空
			$("username").focus();     //获得焦点
			loadAllInfo();
		}	

4.完整的web前端代码实现。

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>简易手机通讯录</title>		
	<script>		
		//保存一条通讯记录数据,同时显示在div中 
		function $(id){return document.getElementById(id);}
		function saveInfo(){
			var name1=$("username").value;//取姓名
			var phone1=$("userphone").value;	//取电话
			if (name1!="" && phone1!="")  //不为空处理
			{
				localStorage.setItem(name1,phone1);
				loadAllInfo();
				alert("添加成功"); 
                $("username").value="";     //添加成功后置空
                $("username").focus();      //获得焦点
			    $("userphone").value="";	//添加成功后置空
			}else{                          //姓名或电话为空,告警并获得焦点
				alert("请输入姓名和电话!");
				$("username").focus();
			}			 
		}
		//以姓名查找通讯录信息  
		function findForName(){  
			var searchname = $("username").value;  
			var searchphone = localStorage.getItem(searchname); //取电话 
			$("userphone").value=searchphone;                   //填充电话
		}
		//从localStorage中取出所有通讯录中信息,并展现到界面上
		function loadAllInfo(){
			// localStorage.clear();
			var result = ""; 
			if(localStorage.length>0){ 
				result += "姓名    电话\n";  
				for(var i=0;i<localStorage.length;i++){  
					var name= localStorage.key(i);  
					var phone = localStorage.getItem(name);  
					result += name+"   ---   "+phone+"\n";  
				}               
				$("phoneset").innerHTML = result;  
			}else{  
				$("phoneset").innerHTML = "通讯录为空……";  
			}  
		}
		//删除某一条通讯信息
		function deleteName(){
            $("userphone").readonly="readonly";
			localStorage.removeItem($("username").value); //按姓名删除通讯录 
			$("userphone").value="";   //电话置空
			$("username").value="";    //姓名置空
			$("username").focus();     //获得焦点
			loadAllInfo();
		}	
	</script>
	</head>
	<body onload="loadAllInfo();">		 
		<article style="width:350px;height:450px;text-align:center;border:12px groove #0099cc;margin:0 auto;padding:20px;">
		<header>
			<h3 style="background:#ededed;padding:10px auto;">手机通讯录管理器</h3>
		</header>
		<form method="post" action="">
		<fieldset style="width:300px;text-align:center;">
			<legend>简易手机通讯录</legend>
			<label for="name">姓名:</label>  
			<input type="text" id="username" name="username" required/><br/>  
			<label for="telphone">电话:</label>  
			<input type="text" id="userphone" name="userphone" required/><br/>  
			<br>
			<input type="button" onclick="saveInfo()"    value="添加"/>			
			<input type="button" onclick="findForName()" value="查询"/>
			<input type="button" onclick="deleteName()"  value="删除"/> 			
			<input type="reset">			
			</form>
			<div id="displayallinfo" name="displayallinfo">
			   <textarea name="" rows="8" cols="30" id="phoneset"></textarea>
			</div>
		</fieldset>		
			<footer style="background:#ededed;height:40px;">
			<p><strong>前端工作室设计</strong><br>
		 <strong>版权所有&copy;2017-2020</strong></p>
		</footer>
		</article>
			</body> 
</html>

实现效果

主页面 -> 添加联系人
使用IndexedDB数据库实现手机通讯录管理功能_第1张图片
使用IndexedDB数据库实现手机通讯录管理功能_第2张图片

使用IndexedDB数据库实现手机通讯录管理功能_第3张图片

欢迎 点赞+评论+关注 喔!
使用IndexedDB数据库实现手机通讯录管理功能_第4张图片

你可能感兴趣的:(web前端)