微信h5扫码接口范例:使用localStorage防止扫码后表单其他内容丢失

简介: 微信h5扫码接口范例:使用localStorage防止扫码后表单其他内容丢失

测试方法: 将以下代码保存到htm文件放到服务器上。然后将这个html文件的URL发给微信上任意好友后点开访问。

测试效果: 在打开的页面中输入姓名,勾选爱好里面的一项或两项。然后点击扫码,当扫码内容显示到输入框后表单里其他内容并未丢失。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调用扫码后表单数据不丢失</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_626784_mcjb2yy4vfl.css" />
    <script src="//cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    姓名:<input type="text" id="username"><br>
    学号:<input type="text" id="usernum"> <i id="saoma" class='dzwfont dzw-saomiao'></i><br>
    爱好:<input type="checkbox" id="chouyan">抽烟 <input type="checkbox" id="hejiu">喝酒<br>
    <input type="button" id="tijiao" value="提交">
</body>
<script type="text/javascript">
    $(document).ready(function() {
    
        //页面载入时读取之前保存的数据并设置
        $("#username").val( localStorage.getItem("username") );
        $("#chouyan").prop("checked", localStorage.getItem("chouyan")=="true" );
        $("#hejiu").prop("checked", localStorage.getItem("hejiu")=="true" );

        var qr = GetQueryString("qrresult");
        if (qr) $("#usernum").val(qr);
    });

    $("#saoma").click(function() {
    
        //跳转前保存数据
        localStorage.setItem("username", $("#username").val());
        localStorage.setItem("chouyan", $("#chouyan").prop("checked"));
        localStorage.setItem("hejiu", $("#hejiu").prop("checked"));

        window.open("//996315.com/api/scan/?redirect_uri=" + encodeURIComponent(location.href), "_self");
    });

    function GetQueryString(name) {
    
        var reg = new RegExp("\\b" + name + "=([^&]*)");
        var r = decodeURIComponent(location.href).match(reg);
        if (r != null) return r[1];
    }
</script>

</html>
目录
相关文章
|
3月前
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
70 0
|
17天前
详细教程:扫码提交表单后,数据直接推送到企业微信、钉钉、飞书群聊
在草料制作的表单中,填表人扫码填写并提交数据后,这些信息可以立即通过企业微信、钉钉或飞书自动推送到相应的群聊中,实现即时共享和沟通,提升团队协作效率。
|
2月前
|
小程序 JavaScript Java
微信小程序+SpringBoot接入后台服务,接口数据来自后端
这篇文章介绍了如何将微信小程序与SpringBoot后端服务进行数据交互,包括后端接口的编写、小程序获取接口数据的方法,以及数据在小程序中的展示。同时,还涉及到了使用Vue搭建后台管理系统,方便数据的查看和管理。
微信小程序+SpringBoot接入后台服务,接口数据来自后端
|
3月前
|
XML Java 数据格式
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充,target下只有接口的编译文件,xml文件了,添加日志的写法
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充,target下只有接口的编译文件,xml文件了,添加日志的写法
|
3月前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
301 0
|
3月前
|
小程序
【微信小程序】实战案例 -- 向订阅用户发送消息(范例:报名提醒)
【微信小程序】实战案例 -- 向订阅用户发送消息(范例:报名提醒)
156 0
|
3月前
|
小程序 C++
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
55 0
|
3月前
|
移动开发 JavaScript
thinkPHP5.0开发微信H5页面分享接口signature验证失败,signature与微信 JS 接口签名校验工具返回结果不一致
thinkPHP5.0开发微信H5页面分享接口signature验证失败,signature与微信 JS 接口签名校验工具返回结果不一致
78 0
|
4月前
|
API 开发工具
企业微信SDK接口API调用-触发推送企业微信微信好友
企业微信SDK接口API调用-触发推送企业微信微信好友
|
4月前
|
API Android开发 iOS开发
个人微信开发API协议接口
个人微信开发API协议接口

热门文章

最新文章

下一篇
无影云桌面