Input标签实现重新打开页面,实现记忆上次录入内容

Input标签实现重新打开页面,实现记忆上次录入内容

在前端实际应用中,客户需求多种多样,可能遇到需要将上次录入的内容自动填充到Input标签内,那么就需要将上次输入的内容保存到缓存在,下次打开页面后,取出缓存的内容,给其它赋值
最终效果如下图:

在input标签内填写完成后,点击搜索查询出条件内容,关闭这个界面后,下次打开这个页面,在这个页面内,搜索的文本框,自动显示上传录入的内容
第一次打开这个页面,内容如下:
在这里插入图片描述
录入筛选条件内容
在这里插入图片描述
关闭该页面重新打开后,记录上次输入的内容,下图是重新打开该页面,input标签记录的是上次输入的内容
在这里插入图片描述
实现逻辑
第一步:首先设置cookie的值

 function SetCookie(name,value)//两个参数,一个是cookie的名子,一个是值
    {
        var days = 7; //设置cookie保留7天
        var datime= new Date();    
        time.setTime(exp.getTime() + Days*24*60*60*1000);
        document.cookie = name + "="+ escape (value) + ";aa=" + datime.toGMTString();
    }

第二步:将input标签的值赋值给cookie
在这里插入图片描述

 //给cookie的name赋值
    function savecookie(){
        var orderno=$("#orderno").val();//#orderno :表身input标签的id
        var prdname=$("#prdname").val();
        var prdno=$("#prdno").val();
        SetCookie("orderno",orderno);
        SetCookie("prdname",prdname);
        SetCookie("prdno",prdno);
    }

input提交后,可以通过浏览器查看设置的cookie值
在这里插入图片描述
第三步:获取cookie的值

 //获取cookie的值
    function getCookie(name)//取cookies函数
    {
        var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
        if(arr != null) return (arr[2]); return null;
    }

第四步:设置当打开该页面时,将cookie的值赋值到input栏位上

    $("#orderno").val(getCookie("orderno"));
    $("#prdname").val(getCookie("prdname"));
    $("#prdno").val(getCookie("prdno"));

通过上面的步骤即可完成重新打开页面,input标签自动填充上次录入的内容

  • 4
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值