localStorage失效问题：扣除数值后刷新页面值恢复默认

你的代码里有几个关键问题导致localStorage无法正常保存值，刷新后恢复默认：

• input元素的读写方法错误：.currentVal是input标签，操作它的内容应该用.val()，而不是.html()。.html()是用来操作元素内部HTML内容的，对input这类表单控件不适用，这会导致你读取和存储的都是错误的值。
• 未处理localStorage初始为空的情况：第一次打开页面时，localStorage里没有"dec"这个键，此时localStorage.getItem("dec")会返回null，直接赋值给input会显示空，而input的默认value是100，刷新后浏览器会用默认值填充。

修正后的jQuery代码 #

$(document).ready(function(){
   var decVal = $(".decVal");
   var currentVal = $(".currentVal");

   // 初始化：优先从localStorage读取，没有则用默认值100
   var savedVal = localStorage.getItem("dec");
   currentVal.val(savedVal ? savedVal : 100);
   
   $(".decValButton").click(function(){
      // 确保数值类型正确，避免字符串拼接或非数字计算错误
      var currentNum = parseInt(currentVal.val(), 10);
      var decNum = parseInt(decVal.val(), 10) || 0;
      var newVal = currentNum - decNum;
      
      currentVal.val(newVal);
      // 存储input的当前值（用.val()而非.html()）
      localStorage.setItem("dec", newVal);
      decVal.val("");
   });
});

关键修改说明 #

1. 初始化时增加了对localStorage值的判断，没有保存值时就用默认的100，确保input始终显示正确数值。
2. 读写input内容全部改用.val()方法，匹配input控件的操作逻辑。
3. 增加parseInt()转换数值类型，避免输入非数字时出现计算错误（比如字符串相减得到NaN），同时处理了.decVal为空的情况（默认扣除0）。

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