JavaScript使用localStorage存取司机绩效计分变量的异常问题

核心异常根因 #

• 读取rollout变量返回NaN：localStorage仅支持存储字符串类型数据，若之前写入时存入了异常格式的字符串（如"undefined"），或是读取时未做空值、有效性校验，直接做数值运算最终就会生成NaN
• 累加逻辑变为字符串拼接：从localStorage取出的原始值是字符串格式，直接参与+=运算时，JavaScript会触发隐式类型转换，把右侧数字转为字符串与左侧值拼接，最终生成连续字符串而非递增数值

读取阶段的安全处理实现 #

• 不能直接将localStorage.getItem()的返回值赋值给计分变量，必须做三层兜底校验
• 校验逻辑顺序：
  • 先判断接口返回值是否为null/空值，空值直接返回初始值0
  • 非空值通过Number()方法强制转换为数值类型
  • 转换后校验是否为有效数值，无效值同样返回初始值0
• 参考实现代码：

/**
 * 安全读取滑行计分值
 * @returns {number} 有效数值类型的滑行计分值
 */
function getRolloutScore() {
  const storedRaw = localStorage.getItem('rolloutScore');
  if (!storedRaw) return 0;
  const convertedNum = Number(storedRaw);
  return isNaN(convertedNum) ? 0 : convertedNum;
}

// 全局变量初始化时直接赋值为处理后的数值类型，不要直接拿原始字符串
let countRollout = getRolloutScore();

累加逻辑的类型加固 #

• 所有参与累加运算的变量必须保证是纯Number类型，禁止用从localStorage取出的原始字符串直接参与运算
• 累加完成后再将数值同步写入localStorage做持久化
• 参考实现代码：

// 滑行阶段触发的累加逻辑
function triggerRolloutAdd() {
  // 累加前做最终类型兜底，防止外部修改导致变量类型异常
  countRollout = Number(countRollout) + 0.01;
  // 同步持久化到localStorage
  localStorage.setItem('countRollout', countRollout);
}

常见踩坑规避 #

• 禁止用短路逻辑直接简化赋值，比如错误写法let countRollout = localStorage.getItem('countRollout') || 0：该写法在存储key存在时，会把字符串类型的存储值直接赋值给变量，后续累加必然触发字符串拼接
• 数值转换不要使用parseInt()/parseFloat()作为全局兜底逻辑：这类方法会截断解析异常格式的字符串（如"0.01abc"会被解析为0.01），容易引入隐藏的计算偏差
• 不要在累加逻辑中直接操作localStorage的原始返回值，所有运算必须基于已经转换为Number类型的全局变量完成

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