如何实现计数器存储于localStorage，点击按钮在UI显示且刷新不丢失

需求：创建一个存储在localStorage的计数器，点击保存按钮时将计数器值显示在UI，页面刷新后数值仍能保留。

原代码存在的问题 #

• 初始页面加载时，未将localStorage中存储的计数器值同步到UI，刷新后UI为空
• localStorage存储的是字符串类型，直接用|| 0会导致后续加减操作变成字符串拼接（比如"0"+1变成"01"）
• 保存函数存在注释语法错误，逻辑不够清晰

修正后的代码 #

const plusBtn = document.querySelector('.plus-btn');
const minusBtn = document.querySelector('.minus-btn');
const saveBtn = document.querySelector('.save-btn');
const span = document.querySelector('.span');

// 初始化计数器：从localStorage取值并转为数字，默认值0
let counter = parseInt(localStorage.getItem('counter')) || 0;
// 页面加载时立即同步到UI
span.innerText = counter;

// 绑定事件监听
plusBtn.addEventListener('click', plus);
minusBtn.addEventListener('click', minus);
saveBtn.addEventListener('click', saveCount);

// 加操作：更新计数器并同步到UI
function plus() {
    counter++;
    span.innerText = counter;
};

// 减操作：更新计数器并同步到UI（可选限制最小值）
function minus() {
    if (counter > 0) {
        counter--;
        span.innerText = counter;
    }
};

// 保存操作：将当前计数器值持久化到localStorage
function saveCount() {
    localStorage.setItem('counter', counter);
}

核心要点 #

• 用parseInt转换localStorage的字符串值为数字，避免字符串拼接错误
• 页面初始化时直接把计数器值同步到UI，确保刷新后能显示历史数据
• 加减操作仅更新内存中的计数器和UI，点击保存才完成持久化，匹配需求逻辑
• 减操作中增加的最小值限制可根据实际需求移除

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