webStroage案例

<!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>

转载于:https://www.cnblogs.com/wmwPro/p/5643803.html

webStroage案例相关推荐

python 网络编程之Socket通信案例消息发送与接收
背景网络编程是python编程中的一项基本技术.本文将实现一个简单的Socket通信案例消息发送与接收正文在python中的socket编程的大致流程图如上所示我们来首先编写客户端的代码: # ...
2021年大数据ELK（十七）：Elasticsearch SQL 订单统计分析案例
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录订单统计分析案例一.案例介绍二.创建索引三.导入测试数据四.统计不同支 ...
2021年大数据ELK（十六）：Elasticsearch SQL（职位查询案例）
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录职位查询案例一.查询职位索引库中的一条数据二.将SQL转换为DSL 三.职 ...
2021年大数据ELK（四）：Lucene的美文搜索案例
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录系列历史文章美文搜索案例一.需求二.准备工作 1.创建IDEA项目 2. ...
❤️让人心跳加速的陌陌案例，大数据必需学会的基础案例！❤️ 【推荐收藏】
全网最详细的大数据HBase文章系列,强烈建议收藏加关注! 已列出历史文章目录,帮助大家回顾前面的知识重点. 目录系列历史文章前言陌陌案例一.陌陌案例的需求说明二.陌陌案例中表设计内容 1. ...
2021年大数据Hive（十二）：Hive综合案例！！！
全网最详细的大数据Hive文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录系列历史文章前言 Hive综合案例一.需求描述二.项目表的字段三.进 ...
2021年大数据Flink（三十八）：Table与SQL 案例五 FlinkSQL整合Hive
目录案例五 FlinkSQL整合Hive 介绍集成Hive的基本方式准备工作 1.添加hadoop_classpath 2.下载jar并上传至flink/lib目录 3.修改hive配置 4.启 ...
2021年大数据Flink（三十七）：Table与SQL 案例四
目录案例四需求代码实现案例四需求从Kafka中消费数据并过滤出状态为success的数据再写入到Kafka {"user_id": "1", &qu ...
2021年大数据Flink（三十六）：Table与SQL 案例三
目录案例三需求编码步骤代码实现-方式1 代码实现-方式2 案例三需求使用Flink SQL来统计5秒内每个用户的订单总数.订单的最大金额.订单的最小金额也就是每隔5秒统计最近5秒的每 ...

webStroage案例

webStroage案例相关推荐

最新文章

热门文章