点击按钮实现数值递增并将计数保存到localStorage的实现问题

代码调整核心逻辑 #

• 初始化阶段优先读取localStorage存储的count值，不存在则兜底为0，同步到闭包计数器和页面展示
• 每次点击更新计数后，立即将最新值写入localStorage
• 对localStorage读取的结果做类型转换和空值处理，避免出现null或者字符串拼接问题

完整可运行代码 #

<div class="counter-btn counter-total counter-total-1" id="total" onclick="addnew();">0</div>

<script>
// 初始化读取本地存储的计数，无值则默认0
const initCount = Number(localStorage.getItem('count')) || 0;
// 页面加载直接渲染存储的计数值
document.getElementById("total").innerHTML = initCount;

var count = (function (){
    // 闭包计数器初始值从本地存储读取，而非固定为0
    var counter = initCount;
    return function(){return counter += 1;}
})();

function addnew(){
    const newCount = count();
    document.getElementById("total").innerHTML = newCount;
    // 计数更新后同步写入localStorage
    localStorage.setItem('count', newCount);
}
</script>

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