Firefox与Chromium内核浏览器window.history.go(-1)返回表单页行为差异问题

1. Chromium内核行为差异的原因 #

该差异由Chromium的两大内核策略导致：

• 往返缓存（bfcache）触发规则不同：Chromium对用户主动触发的导航（点击浏览器返回/前进按钮）和页面脚本触发的历史导航（history.go(-1)、history.back()）采用不同的bfcache命中逻辑。对于提交前的表单页面，用户主动点击浏览器返回时，Chromium会直接从bfcache恢复完整页面上下文，包括表单输入值、File对象、JS动态生成的DOM元素（你的额外必填字段）、URL.createObjectURL()生成的临时blob链接。而脚本触发的返回导航，Chromium默认不会复用POST页面的bfcache上下文，会触发页面软重载，导致上下文丢失。
• Blob URL生命周期逻辑不同：Firefox会在关联的历史条目完整失效前，保留未主动调用URL.revokeObjectURL()释放的blob资源；而Chromium只要页面触发重载，就会自动释放当前文档生成的所有blob URL，哪怕同页面的历史条目仍存在，因此重载后原预览地址直接失效，显示损坏图标。

2. 低成本兼容方案 #

以下方案均无需新增隐藏表单回传数据：

方案1：SessionStorage持久化状态（改造成本最低，无需修改后端/确认页逻辑） #

仅需修改表单页两处代码即可：

1. 上传图片生成预览时，同步将图片和动态字段状态存入sessionStorage：

const [img] = imgfield.files;
if (img) {
    imgplaceholder.src = URL.createObjectURL(img);
    // 新增：将图片转为base64持久化存储
    const reader = new FileReader();
    reader.onload = e => {
        sessionStorage.setItem('form_img_preview', e.target.result);
        // 存储额外字段显示状态
        sessionStorage.setItem('form_extra_fields_show', '1');
    };
    reader.readAsDataURL(img);
}

2. 表单页初始化时读取sessionStorage恢复状态：

window.addEventListener('load', () => {
    const savedPreview = sessionStorage.getItem('form_img_preview');
    if (savedPreview) {
        imgplaceholder.src = savedPreview;
        // 恢复额外字段显示
        if (sessionStorage.getItem('form_extra_fields_show') === '1') {
            // 复用原有显示额外字段的逻辑即可
            extraFieldsDom.style.display = 'block';
        }
    }
    // 表单正式提交时清空存储的状态
    document.querySelector('#targetForm').addEventListener('submit', () => {
        sessionStorage.removeItem('form_img_preview');
        sessionStorage.removeItem('form_extra_fields_show');
    });
})

该方案兼容所有浏览器，无论用户点击自定义返回按钮还是浏览器自带返回按钮，状态均可正常恢复。

方案2：无跳转表单提交（体验最优） #

将原表单的同步提交跳转逻辑改为AJAX异步提交，拿到后端返回的临时图片地址后，在当前页直接切换渲染确认内容，完全消除页面跳转，自然不存在返回状态丢失的问题，仅需修改表单提交逻辑和确认内容的渲染逻辑。

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