工时管理网站BUG求助：删除后无法保存、刷新内容恢复

核心问题梳理 #

1. 删除操作误删容器元素：deleteWorktime函数直接把myWorkingHours整个DOM元素从页面移除了，后续添加工时的时候找不到这个容器，自然无法新增内容。
2. 删除未同步本地存储：删除工时只修改了页面DOM，没更新localStorage里的缓存数据，刷新后旧数据又会被加载回来。
3. 确认弹窗逻辑失效：删除按钮绑定了两个onclick属性，浏览器只会执行第一个；而且sicherheitsabfrage函数里的message变量未定义，也没根据用户的确认结果决定是否执行删除。
4. 初始化未处理空值：首次打开页面时localStorage.getItem('html')会返回null，直接赋值给innerHTML会显示"null"文本，需要默认空字符串。

修复后的完整代码 #

JavaScript 代码

// 确认弹窗函数，添加提示文本并返回确认结果
function sicherheitsabfrage(){
    return confirm("确定要删除所有工时吗？");
}

function deleteWorktime() {
    // 先弹出确认框，用户确认后再执行删除
    if(sicherheitsabfrage()){
        let myWorkingHours = document.getElementById("myWorkingHours");
        // 清空容器内容，而非删除容器本身
        myWorkingHours.innerHTML = "";
        // 同步更新本地存储
        localStorage.setItem('html', "");
    }
}

// 初始化页面，处理localStorage为空的情况
let myWorkingHours = document.getElementById("myWorkingHours");
myWorkingHours.innerHTML = localStorage.getItem('html') || "";

function addWorktime() {
    let currentDate = document.getElementById("myDate").value;
    let startTime = document.getElementById("myStartTime").value;
    let endTime = document.getElementById("myEndTime").value;

    // 验证输入是否完整
    if(!currentDate || !startTime || !endTime){
        alert("请填写完整的日期和时间信息");
        return;
    }

    myWorkingHours.innerHTML +=
        `<div class="list-item">
            <img class="small-img" src="img/Uhr.png">
            ${currentDate} ${startTime} - ${endTime} 
        </div>`;

    localStorage.setItem('html', myWorkingHours.innerHTML);
}

HTML 代码

<h1>Arbeitszeiten</h1>
<input id="myDate" placeholder="Datum einfügen" type="date">
<input id="myStartTime" placeholder="Startzeit einfügen" type="time">
<input id="myEndTime" placeholder="Endzeit einfügen" type="time">
<button id="addbutton" onclick="addWorktime()">Speichern</button>
<!-- 合并onclick到一个函数调用，先执行确认再决定是否删除 -->
<button id="deletebutton" onclick="deleteWorktime()"> Alle Arbeitszeiten löschen</button>
<div id="myWorkingHours"></div>

CSS 代码（无需修改）

body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: white;
  font-family: "Roboto";
}

#addbutton {
  background-color: rgb(7, 158, 240);
  color: white;
  border: none;
  font-size: 20px;
  padding: 16px;
  cursor: pointer;
}

#deletebutton{
  background-color: red;
  color: white;
  border: none;
  font-size: 20px;
  padding: 16px;
  cursor: pointer;
}


input {
  border: 1px solid rgba(0, 0, 0, 0.12);
  height: 50px;
  border-radius: 8px;
  width: calc(100% - 16px);
}

.list-item {
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 16px;
  border-radius: 8px;
  font-weight: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.small-img {
  width: 24px;
  height: 24px;
}

额外优化点 #

• 添加了输入验证，避免用户提交空的日期或时间
• 初始化时提前获取DOM元素，避免潜在的未定义错误
• 确认弹窗添加明确提示文本，提升用户体验

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