如何检测Firefox及其他浏览器是否自动填充缓存表单数据，并实现对应表单初始化逻辑

问题背景 #

最近我在做一个静态网页，功能是接收用户输入并做计算，但有个小困扰——每次打开页面，我经常要重复用上一次会话的输入数据。

Firefox会自动把上一次的输入数据填充到我的<input>元素里，这本来是好事，但我希望能明确知道浏览器是否用了缓存数据：

• 如果有缓存数据被自动填充，我就直接用这些数据
• 如果没有缓存数据，我就把表单重置为预设的默认值

我试过的方法 #

一开始我用了最基础的onload事件来做初始化：

<body
        style="[...]"
        onload="init()"
    >

对应的init函数用来检查输入框的当前值：

function init() {
  const inputA = document.getElementById('myInputA');
  const inputB = document.getElementById('myInputB');
  
  if (inputA.value && inputA.value !== emptyValueA) {
    // 使用缓存的A值
  }
  else if (inputB.value && inputB.value !== emptyValueB) {
    // 以另一种逻辑使用缓存的B值
  }
  else {
    // 把所有输入重置为默认值
  }
}

但这个方法完全不管用！因为init()触发的时候，浏览器还没开始填充缓存数据，输入框里只有HTML代码里写的初始value值。

等过了一小会儿，我才发现Firefox在填充缓存值的时候，会逐个触发输入框的oninput事件——我能看到这些事件一个接一个被触发。

我翻了不少相关内容，查了文档就绪状态、load事件相关的逻辑，但就是找不到一个能在缓存填充完成后触发的事件。

想到的可能方向 #

既然浏览器填充缓存会触发oninput，我想过把第一次的oninput事件绑定到专门的初始化逻辑上，但这样还是有问题：如果没有缓存数据，oninput根本不会触发，我得设置一个超时，武断地认为在这个时间段内用户不会手动输入，以此判断没有缓存数据。这显然不是个靠谱的方案。

另外我还很关心：其他浏览器会不会也有类似的自动填充行为？它们的页面生命周期处理和Firefox一样吗？我该怎么适配不同浏览器的这种行为？

备注：内容来源于stack exchange，提问作者Oscar