<!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. Principle of least astonishment

    Principle of least astonishment - Wikipedia https://en.wikipedia.org/wiki/Principle_of_least_astonis ...

  2. UI标签库专题三：JEECG智能开发平台 FormValidation(表单提交及验证标签)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zhangdaiscott/article/details/28484209  自己定义弹出框提示 ...

  3. (linux)container_of()宏

      在学习Linux驱动的过程中,遇到一个宏叫做container_of. 该宏定义在include/linux/kernel.h中,首先来贴出它的代码: /**  * container_of - ...

  4. LoadRunner使用动态链接库技术

    什么是动态库? 动态库一般又叫动态链接库英文为DLL,是Dynamic Link Library 的缩写形式,DLL是一个包含可由多个程序同时使用的代码和数据的库,DLL不是可执行文件.动态链接提供了 ...

  5. String bulit-in function

    tip: 和tuple一样,字符串也是不可变的类型,字符串的内建函数有非常多,我们一一举例来看看他们的作用 下面是用dir(str) 输出的内容: ['__add__', '__class__', ' ...

  6. jsch文件下载功能

    转载:http://www.cnblogs.com/longyg/archive/2012/06/25/2561332.html 上一篇讲述了使用JSch实现文件上传的功能,这一篇主要讲述一下JSch ...

  7. Android 开发:由模块化到组件化

    在Android SDK一文中,我们谈到模块化和组件化,现在我们来聊聊组件化开发背后的哪些事.最早是在广告SDK中应用组件化,但是同样适用于普通应用开发 以下高能,请做好心理准备,看不懂请发私信来交流 ...

  8. mac上python3安装HTMLTestRunner

    下载支持python3版本的HTMLTestRunner.py文件后,拷贝到python3的lib目录下 在终端输入如下命令: 将HTMLTestRunner.py文件拷贝到如下目录后,pycharm ...

  9. 使用slot分发内容

    为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件的模板.这个过程被称为 内容分发 使用特殊的<slot>元素作为原始内容的插槽 除非子组件模板包含至少一个<slot&g ...

  10. hibernate -- 分页模糊查询中setParameter 和setParameterList

    在分页模糊查询中碰到setParameter 和setParameterList这两个方法 setParameter 以前就只会用setParameter(int arg,String str),我用 ...