<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <fieldset id="">

            <legend>客户信息管理网页</legend>

            <table border="1" cellspacing="1" cellpadding="0">

                <tr>

                    <td>

                        姓名

                    </td>

                    <td>

                        <input type="text" id="username"/>

                    </td>

                </tr>

                <tr>

                    <td>

                        邮箱

                    </td>

                    <td>

                        <input type="text"  id="email"/>

                    </td>

                </tr>

                <tr>

                    <td>

                        电话

                    </td>

                    <td>

                        <input type="text" id="tel"/>

                    </td>

                </tr>

                <tr>

                    <td>

                        备注

                    </td>

                    <td>

                        <input type="text" id="info" />

                    </td>

                </tr>

                <tr>

                    <td colspan="2">

                        <input type="button" name="" id="save" value="保存" />

                    </td>

                </tr>

            </table>

            <hr />

            <label for="search">根据姓名检索信息：</label>

            <input type="text" name="" id="search" value="" />

            <input type="button" name="" id="srhBtn" value="检索" />

            <hr />

            <div id="content"></div>

        </fieldset>

    </body>

    <script type="text/javascript">

        document.getElementById("save").onclick=function(){

            var uname = document.getElementById("username").value;

            var email  = document.getElementById("email").value;

            var tel = document.getElementById("tel").value;

            var info = document.getElementById("info").value;

            var obj = {

                "username":uname,

                "email":email,

                "tel":tel,

                "info":info

            }

            localStorage.setItem(uname,JSON.stringify(obj));

        }

        document.getElementById("srhBtn").onclick=function(){

            var con = document.getElementById("search").value;

            var len = localStorage.length;

            for(var i = 0;i<len ;i++){

                if(localStorage.key(i)==con){

                    var obj = JSON.parse(localStorage.getItem(con));

                    var html = "姓名："+obj.username+"<br/>"+

                                "邮箱："+obj.email+"<br/>"+

                                "电话："+obj.tel+"<br/>"+

                                "备注："+obj.info+"<br/>"

                    document.getElementById("content").innerHTML = html;

                }

            }

        }

    </script>

</html>

demo_08webStroage案例的更多相关文章

  1. 数据库优化案例——————某市中心医院HIS系统

    记得在自己学习数据库知识的时候特别喜欢看案例,因为优化的手段是容易掌握的,但是整体的优化思想是很难学会的.这也是为什么自己特别喜欢看案例,今天也开始分享自己做的优化案例. 最近一直很忙,博客产出也少的 ...

  2. SQL Server内存遭遇操作系统进程压榨案例

    场景: 最近一台DB服务器偶尔出现CPU报警,我的邮件报警阈(请读yù)值设置的是15%,开始时没当回事,以为是有什么统计类的查询,后来越来越频繁. 探索: 我决定来查一下,究竟是什么在作怪,我排查的 ...

  3. solr_架构案例【京东站内搜索】(附程序源代码)

    注意事项:首先要保证部署solr服务的Tomcat容器和检索solr服务中数据的Tomcat容器,它们的端口号不能发生冲突,否则web程序是不可能运行起来的. 一:solr服务的端口号.我这里的sol ...

  4. Yeoman 官网教学案例：使用 Yeoman 构建 WebApp

    STEP 1:设置开发环境 与yeoman的所有交互都是通过命令行.Mac系统使用terminal.app,Linux系统使用shell,windows系统可以使用cmder/PowerShell/c ...

  5. 了不起的 nodejs-TwitterWeb 案例 bug 解决

    了不起的nodejs算是一本不错的入门书,不过书中个别案例存在bug,按照书中源码无法做出和书中相同效果,原本兴奋的心情掺杂着些许失落. 现在我们看一下第七章HTTP,一个Twitter Web客户端 ...

  6. 一个表缺失索引发的CPU资源瓶颈案例

    背景 近几日,公司的应用团队反应业务系统突然变慢了,之前是一直比较正常.后与业务部门沟通了解详情,得知最近生意比较好,同时也在做大的促销活动,使得业务数据处理的量出现较大的增长,最终系统在处理时出现瓶 ...

  7. 【Machine Learning】决策树案例：基于python的商品购买能力预测系统

    决策树在商品购买能力预测案例中的算法实现 作者:白宁超 2016年12月24日22:05:42 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本 ...

  8. Redis简单案例(二) 网站最近的访问用户

    我们有时会在网站中看到最后的访问用户.最近的活跃用户等等诸如此类的一些信息.本文就以最后的访问用户为例, 用Redis来实现这个小功能.在这之前,我们可以先简单了解一下在oracle.sqlserve ...

  9. springmvc+bootstrap+jquerymobile完整搭建案例(提供下载地址)

    用一张简单的截图说明下,然后提供一个下载地址. bootstrap的大部分样式官方都是写好的,所以只需要class="官方样式即可",具体可以看官方的案例,下面来个地址 http: ...

随机推荐

  1. sublime text高亮less

    1.打开sublime,ctrl+shift+p打开命令面板,找到package control:install Package,然后选择less2css,回车. 2.继续ctrl+shift+p打开 ...

  2. Delphi- 数据加密和解密

    Delphi进行数据加密,在数据库方面经常要使用到.从网上转载过来的,以后会经常会用到. 一.MD5加密算法 在C#/.Net里提供了MD5加密的类库.在Delphi中没有.只能自己建一个新的单位,将 ...

  3. CAS SSO对手机应用支持的一种思路

    原文地址: http://architecture3.riaos.com/?p=3095368 手机和桌面应用访问CAS,我们不能直接使用CAS提供的web api.不过CAS提供了一个插件,叫CAS ...

  4. URAL - 1736 - Chinese Hockey

    题意:n支队伍打比赛,每2队只进行1场比赛,规定时间内胜得3分,败得0分,若是打到了加时赛,那么胜得2分,败得1分,给出n支队伍最后的总得分,问这个结果是否是可能的,是的话输出“CORRECT”及各场 ...

  5. C# - 系统类 - Array类

    Array类 ns:System Array是一个抽象类 表示数组 提供了创建.查找.删除.排序.修改等应用于数组的操作 此类没有公有的实例构造函数 可以使用静态方法CreateInstance创建A ...

  6. java查询手机号码归属地

    package com; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamRe ...

  7. linux部署tomcat

    安装说明 安装环境:CentOS-6.5安装方式:源码安装 软件:apache-tomcat-6.0.45.tar.gz下载地址:http://tomcat.apache.org/download-6 ...

  8. YII中路径别名

    路径别名 system:代表framework目录 system.web:代表framework/web目录 zii:代表framework/zii目录 webroot:代表项目下的app目录(htt ...

  9. 万网免费主机wordpress快速建站教程-万网主机申请

    很多小伙伴在万网的免费主机申请活动中建立起了自己的个人网站,但还是还有许多小伙伴现在想建站,却发现官网找不到免费主机的申请地址了,以为活动结束了?其实还是可以继续申请免费主机的,接下来小编给大家介绍如 ...

  10. Optimal Logging

    by Anthony Vallone How long does it take to find the root cause of a failure in your system? Five mi ...