如何在HTML页面展示Local Storage值及解决其未定义报错

报错根因定位 #

两个问题本质由三处可复现的代码错误导致：

• 大小写拼写错误：JavaScript 内置的 Local Storage API 是大小写敏感的，正确调用方式为window.localStorage（驼峰命名，末尾S大写）。原代码中所有调用都写为全小写的window.localstorage，浏览器解析时无法匹配到内置属性，因此抛出“Local Storage 未定义”的报错。
• 自定义变量拼写不一致：代码前半段定义变量livesInStorage（存储从Storage取到的值），但后续条件判断中误写为livesInstorage（漏写了变量名中In后的字母a），导致条件判断逻辑读取的是不存在的变量，初始值赋值逻辑完全失效。
• 展示逻辑无兜底：Local Storage 存储的所有值会被自动转为字符串类型，若因写入失败取到null，直接将值插入DOM会出现页面空白、无值展示的问题。

修正后可直接运行的代码 #

// 保持原有定时刷新展示值的逻辑
var loadLives = setInterval(showLives, 100);
// 修正API大小写，正确读取存储值
var livesInStorage = window.localStorage.getItem('lives');
let lives;

// 保持变量名拼写一致，增加空值判断
if(livesInStorage !== null) {
  // 将存储的字符串值解析为整数
  lives = parseInt(livesInStorage, 10);
}
else {
  // 初始值设为3
  lives = 3;
  // 首次加载时写入默认值，避免后续读取空值
  window.localStorage.setItem('lives', lives);
}

function loseLife() {
    if (lives > 1) {
        lives--;
        // 修正API大小写，将最新值存入Local Storage
        window.localStorage.setItem('lives', lives);
    }
    else {
        location.href='fail.html';
    }
}

function showLives() {
    // 增加兜底逻辑，读取失败时展示当前内存中的lives值，避免页面空白
    const displayValue = window.localStorage.getItem('lives') || lives;
    document.getElementById("lifeamount").innerHTML = displayValue;
}

修复后效果 #

• 浏览器调试台不会再抛出Local Storage未定义的报错，所有对存储的调用都能正常触发读写操作。
• 页面中绑定了id="lifeamount"的元素会稳定展示Local Storage中存储的lives值：首次进入无存储值时展示默认值3，扣血时同步更新存储值与页面展示内容，不会出现读值为空的问题。

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