如何从localStorage读取数组并展示 刷新后保存旧数据被覆盖如何解决

问题根因 #

• 你已从localStorage读取了历史条目到entriesFromLocalStorage变量，但没有将该值赋值给用于存储所有条目的countStr数组，页面刷新后countStr始终被初始化为空数组，点击保存时新的空数组会直接覆盖原有历史数据
• 缺少空值兼容逻辑：用户首次打开页面时localStorage中不存在entries字段，JSON.parse会返回null，直接渲染会出现异常内容

修复后的JS代码 #

let count = 0;
// 初始化时直接读取本地存储的历史数据，没有的话默认是空数组
let countStr = JSON.parse(localStorage.getItem("entries")) || []

let saveEl = document.getElementById("save-el")
let countEl = document.getElementById("count-el")
let resetBtn = document.getElementById("reset-btn")
let saveBtn = document.getElementById("save-btn")
let incrementBtn = document.getElementById("increment-btn")

// 初始化直接渲染所有历史条目
saveEl.innerHTML = countStr

incrementBtn.addEventListener("click" , function(){
    count = count + 1 ;
    countEl.innerHTML = count;
})

saveBtn.addEventListener("click" , function(){
    countStr.push(count)
    saveEl.innerHTML = countStr
    localStorage.setItem("entries", JSON.stringify(countStr))
    count = 0;
    countEl.innerHTML = 0;
})

resetBtn.addEventListener("click" , function(){
    saveEl.innerHTML = "";
    // 只清除当前功能的存储数据，避免误删页面其他存储内容
    localStorage.removeItem("entries")
    // 清空当前数组，避免后续保存还会带上老数据
    countStr = []
})

可选优化 #

如果觉得默认的逗号分隔显示不美观，可以把saveEl.innerHTML = countStr改成saveEl.innerHTML = countStr.join(" - ")，条目之间会用横线分隔。

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