<!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" 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="button5" id="button5" value="查询所有" onClick="queryAll()">

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

			<br/><br/>

			<table id="users" border="1px" cellspacing="0"></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的更多相关文章

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

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. HTML5分析实战Web存储机制(Web Storage)

    Web Storage它是Key-Value在持久性数据存储的形式.Web Storage为了克服cookie把所引起的一些限制.当数据需要严格格控制client准时,没有必要不断地发回数据serve ...

  3. Selenium Web 自动化 - 项目实战（三）

    Selenium Web 自动化 - 项目实战(三) 2016-08-10 目录 1 关键字驱动概述2 框架更改总览3 框架更改详解  3.1 解析新增页面目录  3.2 解析新增测试用例目录  3. ...

  4. 【WEB API项目实战干货系列】- 导航篇(十足干货分享)

    在今天移动互联网的时代,作为攻城师的我们,谁不想着只写一套API就可以让我们的Web, Android APP, IOS APP, iPad APP, Hybired APP, H5 Web共用共同的 ...

  5. 【WEB API项目实战干货系列】- API登录与身份验证(三)

    上一篇: [WEB API项目实战干货系列]- 接口文档与在线测试(二) 这篇我们主要来介绍我们如何在API项目中完成API的登录及身份认证. 所以这篇会分为两部分, 登录API, API身份验证. ...

  6. OC：通讯录实战

    实战(使用OC的知识制作一个简易通讯录) //语法糖.笑笑语法 // NSString * string = [NSString stringWithFormat:@"string" ...

  7. 【WEB API项目实战干货系列】- API访问客户端(WebApiClient适用于MVC/WebForms/WinForm)（四）

    这几天没更新主要是因为没有一款合适的后端框架来支持我们的Web API项目Demo, 所以耽误了几天, 目前最新的代码已经通过Sqlite + NHibernate + Autofac满足了我们基本的 ...

  8. 从零开始学 Web 之 HTML5（四）拖拽接口，Web存储，自定义播放器

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. Selenium Web 自动化 - 项目实战环境准备

    Selenium Web 自动化 - 项目实战环境准备 2016-08-29 目录 1 部署TestNG  1.1 安装TestNG  1.2 添加TestNG类库2 部署Maven  2.1 mav ...

随机推荐

  1. Facebook内部高效工作指南

    文章来源: TopDigital http://news.ittime.com.cn/usershow/main?userid=2826 [IT时代网.IT时代周刊编者按]每一个人工作中都会遇到力不从 ...

  2. Space for commit to queue couldn't be acquired

    18/07/27 16:53:53 ERROR source.ExecSource: Failed while running command: tail -F /home/MyBgJavaLan/p ...

  3. ResultSetMetaData类的介绍

    ResultSetMetaData .DatabaseMetaData中的方法介绍 利用ResultSet的getMetaData的方法可以获得ResultSetMeta对象,而ResultSetMe ...

  4. (25) java web的struts2框架的使用-基于表单的文件上传

    一,首先创建一个表单页面 <body> <form action="uploads" method="post" enctype=" ...

  5. Linux Linker Script

    先推荐两个网页: http://blog.csdn.net/muyuyuzhong/article/details/7755291 http://www.cnblogs.com/liulipeng/a ...

  6. PHP获取类名及所有函数名

    PHP获取当前类名.方法名  __CLASS__ 获取当前类名  __FUNCTION__ 当前函数名(confirm)  __METHOD__ 当前方法名 (bankcard::confirm) _ ...

  7. 数字和为sum的方法数（动态规划）

    题目描述 给定一个有n个正整数的数组A和一个整数sum,求选择数组A中部分数字和为sum的方案数.当两种选取方案有一个数字的下标不一样,我们就认为是不同的组成方案. 输入描述: 输入为两行: 第一行为 ...

  8. Mysql的Merge存储引擎实现分表查询

    对于数据量很大的一张表,i/o效率底下,分表势在必行! 使用程序分,对不同的查询,分配到不同的子表中,是个解决方案,但要改代码,对查询不透明. 好在mysql 有两个解决方案: Partition(分 ...

  9. bootstrap学习心得

    一.html的编写规范 <!DOCTYPE html> <html lang="zh-CN"> <head> <title>Page ...

  10. POJ1759 Garland —— 二分

    题目链接:http://poj.org/problem?id=1759 Garland Time Limit: 1000MS   Memory Limit: 10000K Total Submissi ...