使用JavaScript开发增量游戏时localStorage.getItem返回NaN如何解决

问题排查方向 #

• 检查localStorage对应键是否存在且值合法：localStorage.getItem()在键不存在时会返回null，parseInt(null)的结果就是NaN。需要先确认存档逻辑中是否正确把dogco、u1、u2、cps这几个键的值写入了localStorage，且写入的值是可被转为数字的字符串格式。
• 补充默认值兜底逻辑：可以给parseInt的结果加兜底规则，避免出现NaN，比如写成doco = parseInt(localStorage.getItem('dogco')) || 0;，这样就算读取不到有效值也会默认赋值为0，不会出现数值异常。
• 修复条件判断的语法错误：代码中if(cpsok = 1)是赋值操作，不是相等判断操作，正确写法为if(cpsok === 1)。原写法不管cpsok原本的值是什么，都会被强制赋值为1并触发cpsGo()执行，也可能连带引发后续数值异常。
• 打印调试读取结果：可以在每一行getItem之后加console.log()输出对应键的原始值和转换后的值，比如console.log('dogco原始值：', localStorage.getItem('dogco'), '转数字后：', doco)，可快速定位是哪个键读取异常。

优化后的参考代码 #

function loadData() {
    // 所有读取操作加默认值兜底，默认值可根据游戏初始设定调整
    doco = parseInt(localStorage.getItem('dogco')) || 0;
    updateDC();
    clipo = parseInt(localStorage.getItem('u1')) || 1;
    cpwr.innerHTML = `Clickpower: ${clipo}`
    clipes = parseInt(localStorage.getItem('u2')) || 0;
    cps.innerHTML = `Clicks Per Second: ${clipes}`;
    cpsok = parseInt(localStorage.getItem('cps')) || 0;
    // 修正判断运算符为全等
    if(cpsok === 1){
        cpsGo();
    }
};

内容的提问来源于stack exchange，提问作者E_Doez.Coding