切换主题保存按钮文本到localStorage，首次加载显示undefined如何解决

问题原因 #

用户首次访问网页时，localStorage中从未存储过btntext对应的值，此时直接读取window.localStorage.btntext返回结果为undefined，代码直接将该值赋值给按钮的innerHTML，就会出现按钮显示undefined的问题。点击按钮后代码会主动写入btntext到localStorage，后续读取就会恢复正常。

修复方案 #

修改localStorage读取逻辑，增加默认值兜底，当读取不到存储值时，使用按钮初始的默认文本即可：

// Retrieve
// 空值合并运算符??会在左侧值为null/undefined时返回右侧默认值
const storedBtnText = window.localStorage.btntext ?? "Dark Mode";
document.getElementById('btntextt').innerHTML = storedBtnText;

如果需要兼容不支持空值合并运算符的老旧浏览器，可替换为如下写法：

// Retrieve
var storedBtnText = window.localStorage.btntext || "Dark Mode";
document.getElementById('btntextt').innerHTML = storedBtnText;

可选优化 #

为了避免JS执行时按钮DOM还未渲染完成，导致获取元素失败的问题，可以将读取逻辑放在DOM加载完成事件中执行：

document.addEventListener('DOMContentLoaded', function() {
  const storedBtnText = window.localStorage.btntext ?? "Dark Mode";
  document.getElementById('btntextt').innerHTML = storedBtnText;
})

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