使用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>