webStroage案例

最新推荐文章于 2024-08-07 17:44:17 发布
最新推荐文章于 2024-08-07 17:44:17 发布
阅读量74 收藏
点赞数
文章标签： json javascript ViewUI
原文链接：http://www.cnblogs.com/wmwPro/p/5643803.html
版权 
<!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

banfu6521
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Cookie/Session/webStroage详解
cdzmy
07-26 395
1. Cookie 2. Session 3. webStroage 4. 总结 cookie cookie的起源   HTTP是无状态的协议。一旦数据交换完毕，客户端与服务器端就会断开连接，再次建立连接需要发送新的请求。这就意味着服务器无法跟踪上次会话.在Session出现之前。基本上所有的网站都采用Cookie来跟踪会话。 什么是cookie   cookie是指某些网站为...
webStroage ＞ cookie ＞ session ＞ jwt 用户信息发展全过程
成长的嘻嘻哥
12-23 283
Web Storage浏览器存储，localStorage本地存储、sessionStorage会话存储
WebStroage
qq_40781291的博客
03-02 170
Cookie cookie简介 cookie是一个小文本文件，用于客户端和服务器通信时保存客户端状态。 cookie弊端 cookie在不同浏览器中数目限制不一样，IE6以下限制cookie20个，IE7以上和firefox浏览器限制50个，Safari和Chrome没有数目限制 过多使用cookie会造成资源浪费 安全性问题，cookie会被人截获，截获者不需破译即可利用客户端状态。(解决方...
WebStroage，sessionStorage，localStorage使用
weixin_45415458的博客
09-18 113
WebStroage技术中，浏览器为用户提供了两个对象 1. sessionStorage： 会话级数据存储，类数组对象，在浏览器进程所分得内存存储着一次web会话可用的数据，可供此次会话中所有的页面共同使用，浏览器一旦关闭就消失了。作用：在同一个会话中的所有页面见可共享数据 注意： 存储就是的地方就相当于一个对象，只不过往对象里面存东西，转字符串后存进去，取出来后又转回来对象转字符串：JSON....
快速理解webStroage
weixin_30535167的博客
07-05 50
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <fieldset id=""&gt...
浏览器本地存储webStroage
mantou_riji的博客
07-20 240
/所以如果想要传递对象可以调用JSON.stringify方法，将对象转换为json字符串（json字符串可以显示对象内容，但本质也是一个字符串）//所以如果想要传递对象可以调用JSON.stringify方法，将对象转换为json字符串（json字符串可以显示对象内容，但本质也是一个字符串）sessionStorage的4个操作存储数据、获取数据、删除数据、清空数据（和localStroage一样）localStorage的4个操作存储数据、获取数据、删除数据、清空数据。手动删除如清空缓存。...
web常用的三种存储方式的区别及记录登录名和密码案例
csdn_zy_com的博客
12-26 1466
一.服务器存储： 数据库：存储项目的核心数据 session技术：存储当前用户的信息 客户端存储： cookie存储：大小限制在4kb，通过请求服务器返回一个cookieID存在浏览器缓存中，占用宽带，浏览器通用IE6限制每个与，名20个cookies userDate是IE的专用特性，用的人较少，现在用的最多的flash的本地存储，空间是cookie的25倍，已被淘汰。 Google Gears...
本地存储 Web Storage
Jinmy的博客
08-23 168
HTML5新增了一个可以在客户端保存数据的web stroage功能。取代HTML4中的 cookies存储机制。 一、cookies存在的问题： 1.大小：cookies的大小被限制在4kb 2.带宽： cookies是随HTTP事务一起被发送的。因此会浪费一部分发送cookies时使用的带宽 3.复杂性：要正确地操纵cookies是困难的 二、web storage分为两种 1.se...
HTML5 的 Web Stroage
xuan的博客
08-20 417
1 cookie的问题 （1）大小：cookie的大小被限制在4KB。 （2）带宽：cookie是随HTTP事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽。 （3）复杂性：要正确地操纵cookie是很困难的。 2 Web Storage     功能：在客户端本地保存数据。 sessionStorage（临时保存） （1）将数据保存在session对象中。 （...
Python打开JSON/CSV文件的正确方式
splendid_java的专栏
08-06 453
我们在使用python的过程中，经常需要它完成一些数据处理的工作，其中尤以json/csv文件为常见。今天，博主针对异常UniCodeDecodeError进行试验，因为这个是新手最容易犯错的地方。针对，博主提供了错误和正确的示例，相信能够从中获取一些帮助。
ABAP+json格式数据转换时参数为空没传值
LilySesy的博客
08-01 457
COMPRESS这个参数，当它为X时，则表示不会将内表中为零的数据传输过去。
前端Web-JavaScript(下)
Yu2uki的博客
08-03 1437
补全一下js,忘记了好回来看
电影票房数据的获取，可以控制数量，并导出表格或csv
lfsysc的博客
08-03 576
df.to_excel("票房.xlsx",index=False)df.to_csv("票房.csv")#本文仅供学习交流之用。
开发android app用于移远模块读写IMEI 模组EC200DEULA-D08-SNNDA 支持socket连接读写IMEI
最新发布
chenhao0568的专栏
08-07 253
发送{“function”: “write_imei”,“imei”: “860004050179648”}响应{“message”: “success”,“imei”: “860004050179648”}当结果正常时message为success,否则message给出英文具体原因,其它参数可能为空。发送{“function”: “read_imei”}响应{“message”: “success”}前面本地5902 转发到 后面设备为5902。PC与终端APP之间 json通信协议。
使用Fastjson 序列化对象含有$ref引用解决方法
DavidSoCool的博客
08-04 217
Fastjson序列化对象成字符串时，如果对象中存在引用关系，例如一个对象的属性引用了另一个对象，那么在序列化过程中，Fastjson会使用。当Fastjson遇到一个已经序列化过的对象时，它会检查该对象是否已经在序列化过程中被引用过。如果是，则不会再次序列化该对象，而是使用。来表示这种引用关系。这样做的目的是为了节省存储空间和提高序列化效率，因为通过引用而不是重复存储相同的数据可以大大减少序列化后的数据大小。来指向之前序列化过的对象。这样可以避免重复序列化相同的数据，从而提高效率。
fme从json中提取位置到kml中
weixin_43229258的博客
08-06 759
数据就是官方提供的数据，模板的基本节结构是读模块+转换器+写模块，最近爬取一些json文件，用到了。
微调LLaMA-Factory的数据集格式-fintech.json
qq_38148600的博客
08-02 311
在这个上下文中，它说明了你希望模型执行什么样的操作或理解什么样的指导信息。这样的数据格式有助于模型理解特定的指令，并根据输入数据生成相应的输出。在微调过程中，大量的这类数据样本会被用来训练模型，以提高其在特定任务上的性能。这些数据可以是文本、问题、对话的一部分或者是任何模型需要处理的信息。在微调过程中，这些输入将用来训练模型如何根据指令来生成正确的输出。: 这个元素定义了基于给定指令和输入数据，模型应该生成的正确输出。在训练过程中，模型会尝试学习如何将输入映射到这些期望的输出上。告诉模型需要执行翻译任务，
鸿蒙系统开发【网络-上传和下载（ArkTS）】基本功能
2301_76813281的博客
08-02 1131
本示例使用@ohos.request接口创建上传和下载任务，实现上传、下载功能，hfs作为服务器，实现了文件的上传和下载和任务的查询功能。
Spring(Day 17)
m0_73629914的博客
08-03 1151
IOC。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值