浏览器复制标签页时忽略表单元素当前值的问题排查与解决

问题现象 #

在Windows 11系统的Chrome、Firefox和Edge最新版本中测试发现：复制浏览器标签页时，form元素的当前值会被忽略，新标签页仅保留表单元素的初始状态，依赖表单值的页面显示也随之异常。

示例代码 #

JavaScript #

var textarea = document.querySelector('textarea');
var p = document.querySelector('p');
var range = document.querySelector('input[type="range"]');
var output = document.querySelector('output');
var checkbox = document.querySelector('input[type="checkbox"]');
var span = document.querySelector('span');
var theme = document.querySelector('select');

function write() {
  p.textContent = textarea.value;
  output.value = range.value;
  span.textContent = checkbox.checked;
  document.body.className = theme.value;
}

textarea.addEventListener('input', write);
range.addEventListener('input', write);
checkbox.addEventListener('change', write);
theme.addEventListener('change', write);

write();

CSS #

body {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 1em 0.5em;
}

body.Dark {
  color: white;
  background: black;
}

HTML #

<textarea>Hello, world!</textarea>
<p></p>
<input type="range">
<output></output>
<input type="checkbox">
<span></span>
<select>
  <option>Light</option>
  <option>Dark</option>
</select>

问题复现步骤 #

1. 自行搭建测试页面或运行上述代码。
2. 修改textarea、input和select的默认值，页面会同步更新显示内容和主题。
3. 复制当前标签页。
4. 查看新标签页：p、output和span元素未显示修改后的内容，主题仍为初始的浅色模式，表单元素也回到初始值。

疑问与解答 #

1. 问题产生的原因是什么？ #

浏览器复制标签页时，默认基于页面的初始HTML状态（即服务器返回的原始DOM，或页面加载完成时的初始状态）创建新标签页，而非当前运行时的DOM状态。表单元素的用户输入值属于运行时动态修改的状态，浏览器复制标签页不会主动保存这些值，只会还原表单的defaultValue或默认选中状态，导致新标签页中表单回到初始值，依赖表单值的页面显示也随之异常。

2. 对应的解决方案是什么？ #

主流解决思路是通过本地存储同步表单状态：
监听表单元素的变化事件，将当前值实时保存到localStorage中；页面加载时（包括新标签页初始化时），从存储中读取保存的值，恢复表单状态并更新页面显示。

示例修改代码：

// 页面加载时恢复状态
function loadState() {
  const savedState = localStorage.getItem('formState');
  if (savedState) {
    const state = JSON.parse(savedState);
    textarea.value = state.textarea;
    range.value = state.range;
    checkbox.checked = state.checkbox;
    theme.value = state.theme;
    write();
  }
}

// 保存状态到localStorage
function saveState() {
  const state = {
    textarea: textarea.value,
    range: range.value,
    checkbox: checkbox.checked,
    theme: theme.value
  };
  localStorage.setItem('formState', JSON.stringify(state));
}

// 修改事件监听，添加保存逻辑
textarea.addEventListener('input', () => { write(); saveState(); });
range.addEventListener('input', () => { write(); saveState(); });
checkbox.addEventListener('change', () => { write(); saveState(); });
theme.addEventListener('change', () => { write(); saveState(); });

// 先加载状态再初始化
loadState();

注意：若需区分不同页面的状态，可给存储键添加页面唯一标识，避免状态互相干扰。

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