<!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. Visual C++中的编译器优化

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Visual C++中的编译器优化.

  2. Unityclient通信測试问题处理（二）

    Unityclient通信測试问题处理(二) 在client的通信測试过程中.场景载入的问题给自己带来了不小的麻烦.由于消息的解析方法在单独的监听线程中调用,这也就意味着无法在消息的解析方法中调用Un ...

  3. SVN高速新手教程

    因为做Zip和Rar解析的时候,找到了mucommander工具,可将其jar包导入项目里执行发现报:类型转换错误,org.apache.commons.logging.impl.Log4JLogge ...

  4. dubbox开发rest+json指南【转】

    http://dangdangdotcom.github.io/dubbox/rest.html 目录 概述 REST的优点 应用场景 快速入门 标准Java REST API:JAX-RS简介 RE ...

  5. linux 系统磁盘分区之fdisk

    对于学习磁盘分区,通常学习的都是fdisk命令 当然,对于小于2TB的磁盘,我们基本上是使用fdisk命令进行分区 下面就简单介绍一下fdisk操作磁盘的基本命令和场景模拟 常用命令介绍   fdis ...

  6. 如何去除CISCO交换机中的口令？？

    加电后按住交换机前面的那个按钮 灯不闪了以后松手这时交换机会进入switch:模式输入命令 flash然后 dir flash:你会发现有个 config.text 的文件 你的密码和配置都保存在那里 ...

  7. android 换肤模式总结

    由于Android的设置中并没有夜间模式的选项,对于喜欢睡前玩手机的用户,只能简单的调节手机屏幕亮度来改善体验.目前越来越多的应用开始把夜间模式加到自家应用中,没准不久google也会把这项功能添加到 ...

  8. Fragment碎片频繁来回切换的时候报java.lang.IllegalStateException: No activity

    出现这个问题的原因是因为使用的transcation.replace(fragmentTwo);的方式进行碎片切换的. 解决方案是使用add和show.hide方法组合实现碎片的切换(应该是显示.隐藏 ...

  9. 第七篇：web之前端之ajax

    前端之ajax   前端之ajax 本节内容 ajax介绍 原生js实现ajax jquery实现ajax json 跨域请求 1. ajax介绍 AJAX(Asynchronous Javascri ...

  10. C# Quartz.Net 定时任务的简单使用

    最近做了一个定时执行任务的软件. 执行任务时,会使用log4net记录日志,如果执行任务有异常,则发送邮件给指定的对象. 我做的是每天的9点和16点执行一次任务,以此记录: 首先,获得Quartz.N ...