localStorage.removeItem运行异常，页面第三次刷新数据丢失如何修复？

问题根因 #

你的代码逻辑和需求不匹配，核心问题有两处：

• getSavedValue 函数每次读取存储值后都会主动调用 localStorage.removeItem(v) 删除对应存储项，只有你修改输入框内容触发 onkeyup 事件时，才会调用 saveValue 把值重新写回localStorage。如果刷新页面时没有修改过输入框内容，存储项在第一次读取后就被删除，下一次刷新就拿不到历史值，只能返回默认的当天日期，这就是你第三次刷新数据消失的原因。
• 你没有实现「仅标签页关闭时清除数据」的逻辑，反而在每次读取存储值时都做了删除操作，和需求完全相悖。
  另外补充一个隐藏bug：日期输入框选择日期时多为点击日期选择器操作，不会触发onkeyup事件，会导致你选择的日期没有被存入存储。

修复方案 #

方案1：基于localStorage实现自定义清除逻辑 #

首先修改HTML，新增onchange事件保证点选日期也能触发保存：

<input type="date" id="exdated" name="" 
        onfocus="localStorage.setItem('myTestApp','exdated')" 
        onkeyup="saveValue(this);"
        onchange="saveValue(this);">
<br><br> 
<input type="date" id="datata" name="" 
        onfocus="localStorage.setItem('myTestApp','datata')" 
        onkeyup="saveValue(this);"
        onchange="saveValue(this);">
<br><br>

修改JS逻辑，移除读取时的删除操作，新增页面卸载时的判断逻辑，仅关闭标签页时清除数据：

let today = new Date().toISOString().slice(0, 10)

document.getElementById("datata").value = getSavedValue("datata"); 
document.getElementById("exdated").value = getSavedValue("exdated"); 

function saveValue(e) {
    var id = e.id;  
    var val = e.value; 
    localStorage.setItem(id, val); 
}

function getSavedValue(v) {
    // 移除多余的删除逻辑，读取不销毁存储值
    return localStorage.getItem(v) || today;
}

// 监听页面卸载事件，仅在非刷新/非前进后退时清除数据
window.addEventListener('beforeunload', () => {
    const navInfo = performance.getEntriesByType('navigation')[0];
    // 排除刷新、前进后退场景，仅关闭标签页/浏览器时清除
    if (navInfo?.type !== 'reload' && navInfo?.type !== 'back_forward') {
        localStorage.removeItem('datata');
        localStorage.removeItem('exdated');
        localStorage.removeItem('myTestApp');
    }
});

方案2：使用sessionStorage（更简便的原生实现） #

sessionStorage的生命周期默认和当前标签页绑定：页面刷新、前进后退时数据不会丢失，标签页关闭后数据自动销毁，完全符合你的需求，不需要额外编写卸载清除逻辑，直接替换存储对象即可：

let today = new Date().toISOString().slice(0, 10)

document.getElementById("datata").value = getSavedValue("datata"); 
document.getElementById("exdated").value = getSavedValue("exdated"); 

function saveValue(e) {
    var id = e.id;  
    var val = e.value; 
    // 替换为sessionStorage
    sessionStorage.setItem(id, val); 
}

function getSavedValue(v) {
    // 替换为sessionStorage
    return sessionStorage.getItem(v) || today;
}

HTML部分还是需要新增onchange事件，和方案1的HTML修改一致。

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