如何使用JavaScript实现页面刷新后保留localStorage值，让点击计数器延续计数

问题原因 #

• 你初始化count变量时固定赋值为0，页面加载后仅将localStorage存储的计数值渲染到了页面，但没有同步更新count变量本身的值，所以首次点击按钮时计数会基于0重新计算
• decrease函数仅更新了变量和页面显示，没有将最新的计数值存入localStorage，减操作的结果刷新页面后不会保留

修复方案 #

初始化阶段优先从localStorage读取已存储的计数值，取不到的场景再默认赋值为0；同时在加减操作后都同步更新localStorage的存储值。

修复后的完整JavaScript代码 #

let display = document.getElementById("display")
// 初始化时优先从localStorage取值，转成数字，无存储值则默认0
let count = Number(localStorage.getItem("count")) || 0
// 页面加载时先渲染当前计数值
display.textContent = count

function increase(){
    count = count + 1
    display.textContent = count
    localStorage.setItem("count", count)
}

function decrease(){
    count = count - 1
    display.textContent = count
    localStorage.setItem("count", count)
}

补充说明 #

localStorage存储的值默认是字符串类型，所以读取的时候需要转成数字类型再做加减运算，避免出现字符串拼接的异常情况。

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