自动填充脚本运行时表单placeholder显示undefined如何解决

问题根因 #

当用户未提交过表单时，sessionStorage 中不存在对应字段的存储值，sessionStorage.getItem() 会返回 null，若你直接将该返回值（或后续处理产生的 undefined）赋值给输入框的 value 属性，输入框会直接显示 undefined 文本，覆盖HTML中设置的placeholder。

修复代码 #

错误写法示例（你当前的逻辑大概率是类似实现） #

// 直接赋值未做兜底处理
document.querySelector("#username").value = sessionStorage.getItem("form_username");
document.querySelector("#email").value = sessionStorage.getItem("form_email");

推荐修复写法 #

使用**空值合并运算符??**做兜底，只有读取到的值为 null/undefined 时才会赋值为空字符串，不会影响 0、false、空字符串等合法用户输入的正常回填：

document.querySelector("#username").value = sessionStorage.getItem("form_username") ?? "";
document.querySelector("#email").value = sessionStorage.getItem("form_email") ?? "";

如果需要兼容不支持??运算符的旧浏览器，可以用显式判断实现：

const savedUsername = sessionStorage.getItem("form_username");
if (savedUsername != null) { // 该判断会同时匹配null和undefined两种异常情况
  document.querySelector("#username").value = savedUsername;
}

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