16-6 WEB存储-通讯录实战

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>HTML5</title>

<script type="text/javascript">

	/*联系人数据*/

	function Person(username,mobile,qq) {

		this.username = username;

		this.mobile = mobile;

		this.qq = qq;

	}

	/*增加联系人*/

	function add() {

		var username = document.form1.username;

		var mobile = document.form1.mobile;

		var qq = document.form1.qq;

		//判断联系人姓名是否已经存在

		if ( checkUsername(username.value) ) {

			alert('联系人已存在');

			return;

		}

		var p = new Person(username.value,mobile.value,qq.value);

		var jsonStr = JSON.stringify(p);

		localStorage.setItem(p.username,jsonStr);

		alert('联系人增加成功');

	}

	/*修改联系人*/

	function update() {

		var username = document.form1.username;

		var mobile = document.form1.mobile;

		var qq = document.form1.qq;

		//判断联系人姓名是否已经存在

		if ( !checkUsername(username.value) ) {

			alert('联系人不存在');

			return;

		}

		var p = new Person(username.value,mobile.value,qq.value);

		var jsonStr = JSON.stringify(p);

		localStorage.setItem(p.username,jsonStr);

		alert('联系人修改成功');

	}

	/*删除联系人*/

	function del() {

		var username = document.form1.username;

		//判断联系人姓名是否已经存在

		if ( !checkUsername(username.value) ) {

			alert('联系人不存在');

			return;

		}

		localStorage.removeItem(username.value);

		alert('联系人删除成功');

	}	

	/*查询联系人*/

	function queryByUsername() {

		var username = document.form1.username;

		var jsonObj = checkUsername(username.value);

		if (jsonObj) {

			document.form1.mobile.value = jsonObj.mobile;

			document.form1.qq.value = jsonObj.qq;

		} else {

			alert('联系人不存在');

		}

	}

	/*判断联系人是否存在，存在返回数据，不存在返回null*/

	function checkUsername(usernameStr) {

		var username = document.form1.username;

		for (var i = 0; i < localStorage.length;i ++) {

			var key = localStorage.key(i);

			var jsonStr = localStorage.getItem(key);

			var jsonObj = JSON.parse(jsonStr);

			if (jsonObj.username == usernameStr)

				return jsonObj;

		}

		return null;

	}

</script>

</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" id="username"></td>

    </tr>

    <tr>

      <td align="center">手机号码</td>

      <td><input type="tel" name="mobile" id="mobile"></td>

    </tr>

    <tr>

      <td align="center">QQ号码</td>

      <td><input type="number" name="qq" id="qq"></td>

    </tr>

    <tr>

      <td colspan="2" align="center">

      	<input type="button" name="button" id="button" value="增加到联系人" onClick="add();">

      	<input type="button" name="button2" id="button2" value="查询联系人" onClick="query();">

      	<input type="button" name="button4" id="button4" value="修改联系人" onClick="update();">

		<input type="button" name="button3" id="button3" value="删除联系人" onClick="del();">

        <input type="reset" value="清空">

      </td>

    </tr>

  </table>

</form>

</body>

</html>
巴特西

16-6 WEB存储-通讯录实战

最新文章

热门文章
