如何用JavaScript/jQuery实现跨页面重复邮编表单自动填充

实现思路 #

利用浏览器本地存储localStorage实现同域名下跨页面数据共享，第一个页面监听用户输入的邮编实时存储，第二个页面加载时读取存储的值填充到目标输入框，同时调用选中方法实现选中状态。

具体代码实现 #

第一个页面（用户首次输入邮编的页面） #

给第一个邮编输入框添加输入事件监听，实时存储用户输入的邮编：

document.getElementById('PostalCode').addEventListener('input', function() {
    // 可自行加格式校验逻辑，过滤非法字符
    const formatCode = this.value.replace(/[^\d-]/g, '');
    localStorage.setItem('user_postal_code', formatCode);
});

第二个页面（待自动填充的页面） #

页面加载完成后读取存储的邮编，填充到目标输入框并选中内容：

document.addEventListener('DOMContentLoaded', function() {
    const savedCode = localStorage.getItem('user_postal_code');
    const targetInput = document.querySelector('input[data-param-id="PostalCode"]');
    if (savedCode && targetInput) {
        // 填充值
        targetInput.value = savedCode;
        // 触发change事件，适配自带邮编掩码、自动计算运费的逻辑
        targetInput.dispatchEvent(new Event('change'));
        // 选中输入框内容
        targetInput.select();
    }
});

补充说明 #

• 上述方案仅适用于两个页面属于同一个域名的场景，localStorage的存储会随用户清除浏览器缓存失效。
• 若两个页面跨域名，可选择URL参数传值方案：第一个页面跳转时将邮编拼接在第二个页面的URL后缀，第二个页面加载时解析URL参数取值填充即可。
• 如果站点有用户登录体系，也可以将邮编同步存储到服务端用户关联信息中，第二个页面直接请求接口拉取取值。

内容的提问来源于stack exchange，提问作者Aldry