<!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. Spring在3.1版本后的bean获取方法的改变

    xml配置不变,如下 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="ht ...

  2. Spark SQL is a Spark module for structured data processing.

    http://spark.apache.org/docs/latest/sql-programming-guide.html

  3. Mongoose Embedded Web Server Library

    https://github.com/cesanta/mongoose http://ltp.ai/docs/ltpserver.html LTP Server在轻量级服务器程序mongoose基础上 ...

  4. org.gradle.api.publication.maven.internal.DefaultMavenFactory错误

    Error:Unable to load class 'org.gradle.api.publication.maven.internal.DefaultMavenFactory'. Possible ...

  5. C# 软件实现远程桌面调用

    1.https://www.codeproject.com/Articles/19836/Palantir-Remote-Desktop-Manager codeproject项目 2.http:// ...

  6. iOS 设置TextView控件内容行间距

    - (BOOL)textViewShouldBeginEditing:(UITextView *)textView { if (textView.text.length < 1) { textV ...

  7. redis09---redis 服务器端命令

    redis 服务器端命令 db0,db1,db2是数据库,外层是服务器,服务器下面有20个数据库. :>time ) "" //多少秒 ) "" //多少 ...

  8. css 中的伪类选择器before 与after

    .cf:after,.cf:before {content: " "; display: table;} .cf:after {clear: both;} :before是因为ta ...

  9. 怎么整合小图标，组合到一张png里面

    1.将切出来的图片,一个个打开,用动工具组合到新的图片中: 2.将新建的图片,背景选为透明,保存为png格式: 3.通过css的background-position属性设置元素的背景图片.

  10. 序列流、对象操作流、打印流、标准输入输出流、随机访问流、数据输入输出流、Properties(二十二)

    1.序列流 * 1.什么是序列流 * 序列流可以把多个字节输入流整合成一个, 从序列流中读取数据时, 将从被整合的第一个流开始读, 读完一个之后继续读第二个, 以此类推.* 2.使用方式 * 整合两个 ...