<!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. Android开发：TextView真正可控、不需要焦点的水平滚动--这才是真正的跑马灯

    网上的TextView做跑马灯,大多都是要用到焦点,而且字数要超出滚动区域宽度才能实现滚动,使用起来十分不方便. 这里实现一种真正可控的滚动 (1)不需要焦点 (2)任意字数 (3)滚动从滚动区域右边 ...

  2. windows下载安装MariaDB5.5.32 绿色版

    1.下载地址: http://ftp.yz.yamagata-u.ac.jp/pub/dbms/mariadb/mariadb-5.5.32/win32-packages/mariadb-5.5.32 ...

  3. sharepoint 2013 更改搜索server组态

    1.新搜索server在.安装sharepoint server 2013,并连接到一个现有的sharepoint server领域,完成后.您可以配置新的搜索server. 打开sharepoint ...

  4. Hash表

    Hash表 Hash表也称散列表,也有直接译作哈希表,Hash表是一种特殊的数据结构,它同数组.链表以及二叉排序树等相比较有很明显的区别,它能够快速定位到想要查找的记录,而不是与表中存在的记录的关键字 ...

  5. Android（java）学习笔记209：采用get请求提交数据到服务器（qq登录案例）

    1.GET请求:    组拼url的路径,把提交的数据拼装url的后面,提交给服务器. 缺点:(1)安全性(Android下提交数据组拼隐藏在代码中,不存在安全问题)  (2)长度有限不能超过4K(h ...

  6. Java基础知识强化之集合框架笔记69：Collections类之ArrayList存储自自定义对象并排序的案例

    1. ArrayList存储自自定义对象并排序的案例: ArrayList存储自自定义对象,并使用Collections对ArrayList存储基本包装类的元素排序. 2. 代码实现: (1)Stud ...

  7. Word转换为图片PDF

    1.        Word转换为PDF,程序很多,但转换后的PDF,还可以复制,虽可以加密禁止复制,但市场上太多的PDF,还可以把PDF转换Word等其他格式,很容易被别人利用和剽窃,即便是PDF加 ...

  8. ajax异步传输

    2015.12.7 ajax异步传输 1.ajax :不是一个新的技术. js(XMLHTTPRequest) html css dom xml 这里只是一个新的js的内置对象.这算是js想要变得流行 ...

  9. Qt Quick 简单教程 - 1 (代码备忘)

    qmlscene 未安装 由于出现上面的情况,我开始转战Windows 下学习,昨天安装好了Qt Sdk了,哟吼吼吼. mail.qml内容: import QtQuick 2.3 import Qt ...

  10. Ubuntu 14.04 LAMP搭建小记

    文章目录 LAMP WinQQ Ubuntu 的使用的建模工具 JDK Chormium flash Eclipse 无法找到Jre LAMP 参考资料: 1. 安装php环境   http://ww ...