<!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. 实现GetHashCode时要遵循的规则

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:实现GetHashCode时要遵循的规则.

  2. MongoDB的地埋空间数据存储、空间索引以及空间查询

    一.关于MongoDB 在众多NoSQL数据库,MongoDB是一个优秀的产品.其官方介绍如下: MongoDB (from "humongous") is a scalable, ...

  3. SpringMVC请求分发的简单实现

    简介     以前用了下SpringMVC感觉挺不错了,前段事件也简单了写了一些代码来实现了SpringMVC简单的请求分发功能,实现的主要思想如下: 将处理请求的类在系统启动的时候加载起来,相当于S ...

  4. [React] React Fundamentals: Accessing Child Properties

    When you're building your React components, you'll probably want to access child properties of the m ...

  5. Android中滑屏实现----手把手教你如何实现触摸滑屏以及Scroller类详解

    前言:  虽然本文标题的有点标题党的感觉,但无论如何,通过这篇文章的学习以及你自己的实践认知,写个简单的滑屏小 Demo还是just so so的. 友情提示: 在继续往下面读之前,希望您对以下知识点 ...

  6. linux 内核---------董昊 ( Robin Dong ) and OenHan

    http://oldblog.donghao.org/ http://blog.donghao.org/%E6%97%A7%E5%8D%9A%E5%AE%A2/ http://blog.donghao ...

  7. 编写Qt Designer自定义控件（一）——如何创建并使用Qt自定义控件

    在使用Qt Designer设计窗体界面时,我们可以使用Widget Box里的窗体控件非常方便的绘制界面,比如拖进去一个按钮,一个文本编辑器等.虽然Qt Designer里的控件可以满足我们大部分的 ...

  8. 解决Visual Studio 2010新建工程时出现『1>LINK : fatal error LNK1123: failure during conversion to COFF: file invalid or corrupt』错误

      VS2010在经历一些更新后,建立Win32 Console Project时会出"error LNK1123" 错误. 解决方案为: 第一步:将:项目|项目属性|配置属性|清 ...

  9. hdu1250(Java）大数相加的问题

    Hat's Fibonacci Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...

  10. 开源安全测试 - BackTrack的应用

    开源安全测试 - BackTrack的应用: http://gdtesting.com/product.php?id=99