<!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. kali linux 之 DNS信息收集

    [dig]命令的使用: dig是linux中的域名解析工具,功能比nslookup强很多,使用也很方便. windows系统下使用dig须下载安装一下. 使用方法: root@kali:~# dig ...

  2. Xcode6中使用initWithTitle:title image:image selectedImage:自定义图片

    使用xcode6来运行项目,发现使用原生的tabbar上的图片不显示了. 这个问题是因为xcode6中的一些api方法被废弃了,同时tabbar上图片的渲染方式发生了改变. 先看xcode6中的tab ...

  3. 分布式助手Zookeeper（四）

    分布式助手Zookeeper(四)博客分类: Zookeeper zookeeper配置同步zookeeper编程 Zookeeper是分布式环境下一个重要的组件,因为它能在分布式环境下,给我带来很多 ...

  4. ubuntu12.04已安装SQLite3 而简单易用

    今天想写一点app,使用数据库,所以在这里简要地记住它是安装和使用. 1.安装SQLite3 命令行下输入:sudo apt-get install sqlite3 2.安装SQLite3编译须要的工 ...

  5. JavaScript引擎的工作原理

    http://my.oschina.net/fuckBAT/blog/318355?fromerr=jK6wCh1p#OSC_h4_4

  6. DNS 和 IPv6 配置攻略

    Windows 2003 DNS配置攻略 http://lgzeng2360.blog.51cto.com/275998/161908/ http://ask.zol.com.cn/q/21861.h ...

  7. Linux软连接和硬链接（摘录）

    1.Linux链接概念Linux链接分两种,一种被称为硬链接(Hard Link),另一种被称为符号链接(Symbolic Link).默认情况下,ln命令产生硬链接. [硬连接]硬连接指通过索引节点 ...

  8. 使用ExpandableListView实现一个时光轴

    在许多App上都能看到时光轴的效果,比如携程等等,那么我们今天就利用ExpandableListView来实现一个时光轴效果,先来看看效果图: 效果还是挺简单的,这里我们主要是采用Expandable ...

  9. CentOS7使用VPN上网

    安装epel源 $ sudo yum install epel-release 安装软件包 $ sudo yum install NetworkManager-pptp NetworkManager- ...

  10. ArrayList的深度copy和浅度拷贝

    ArrayList的浅度拷贝方式: 通过Collections.copy方法实现浅度拷贝 ArrayList<GuideGroup> questionGuideGroupList = ne ...