Local Storage读取项为字符串 需转整数实现数值累加

Local Storage 仅支持字符串类型存储，你当前代码在初始化读取存储值时未做类型转换：

1. 首次加载无历史值时，calories 是数字0，运算暂时正常
2. 一旦生成过存储记录，localStorage.getItem("calorieCount") 返回的是字符串类型的数值，此时执行+=运算会触发JS的字符串拼接逻辑，而非数值累加，最终得到类似"10050"的错误拼接结果
3. 未做非数值兜底，若存储值被异常篡改、用户输入非数字内容，会导致总计值变为NaN无法正常使用

• 初始化读取存储值时，统一转换为十进制整数类型，增加非数值兜底逻辑
• 累加前对用户输入值也做合法性校验，避免非法输入污染总计值
• 每次计算完成后同步更新本地存储、刷新页面展示即可

// 读取历史值并转换为十进制整数，无有效值时默认置0
let calories = parseInt(localStorage.getItem("calorieCount"), 10);
if (Number.isNaN(calories)) {
  calories = 0;
}
// 页面初始化时渲染总计值
$('#calorieCount').html(calories);

// 累加按钮点击逻辑
$('#calorie-add').click(function () {
  const inputVal = parseInt(document.getElementById('adjust-input').value, 10);
  // 输入值非法时直接阻断，不执行累加
  if (Number.isNaN(inputVal)) {
    alert('请输入有效的整数数值');
    return;
  }
  // 执行数值累加
  calories += inputVal;
  // 同步更新本地存储（传入数值时会自动转成字符串存储，无需手动转换）
  localStorage.setItem('calorieCount', calories);
  // 同步更新页面展示
  $('#calorieCount').html(calories);
  // 可选：累加完成后清空输入框
  document.getElementById('adjust-input').value = '';
});

localStorage.setItem() 传入数值类型参数时，会自动转换为字符串存储，不需要手动调用toString()方法，只需要在读取值的时候统一做整数解析即可。

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