<!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. Finally语句块的运行

    一.finally语句块是否一定运行? Java中异常捕获机制try...catch...finally块中的finally语句是不是一定会被运行?非常多人都说不是.当然他们的回答是正确的,经过试验. ...

  2. hadoop shuffle

    1 hadoop shuffle的地位 hadoop  shuffle是map reduce算法的核心,是它连接了多个map和多个reduce,它将map的输出交给reduce作为输入. 2 hado ...

  3. Pattern: Microservice Architecture

    Microservice Architecture pattern http://microservices.io/patterns/microservices.html Context You ar ...

  4. String常量池

    http://developer.51cto.com/art/201106/266454.htm

  5. 分享一个好用的函数吧，将js中的对象转成url参数

    JavaScript&jQuery获取url参数方法 这个函数呢是自己在写基于Vue+ElementUI管理后台时用到的,,下面列出来两种使用方式: 最普通的,封装一个js函数 /** * 对 ...

  6. [树套树]K大数查询

    有N个位置,M个操作.操作有两种,每次操作如果是1 a b c的形式表示在第a个位置到第b个位置,每个位置加入一个数c如果是2 a b c形式,表示询问从第a个位置到第b个位置,第C大的数是多少.为了 ...

  7. /dev下添加设备节点的方法步骤（通过device_create）

    将自己开发的内核代码加入到Linux内核中,需要3个步骤: 1.确定把自己开发代码放入到内核合适的位置 将demo_chardev.c文件拷贝到.../drivers/char/目录下. demo_c ...

  8. access函数的使用检查文件的权限【学习笔记】

    #include "apue.h" #include <fcntl.h> int main(int argc,char **argv) { ) err_quit(&qu ...

  9. HDU3081 Marriage Match II —— 传递闭包 + 二分图最大匹配 or 传递闭包 + 二分 + 最大流

    题目链接:https://vjudge.net/problem/HDU-3081 Marriage Match II Time Limit: 2000/1000 MS (Java/Others)    ...

  10. MYSQL学习拓展一：MySQL 存储过程之游标的使用！

    一.MySQL游标的概念 游标介绍: MySQL的游标(cursor)是一个重要的概念,通过查找资料与自己的理解,主要得出以下几点关于自己的理解. 有数据缓冲的思想:游标的设计是一种数据缓冲区的思想, ...