如何向LocalStorage追加数据而非覆盖contenteditable元素内容？

当前代码的问题是每次保存时直接用新内容覆盖LocalStorage中的旧数据，要实现追加存储，只需要修改保存逻辑，先读取原有数据再合并新内容即可。

修改后的JavaScript代码如下：

function saveEdits() {
    // 获取可编辑元素
    var editElem = document.getElementById("edit");
    // 获取当前编辑的内容
    var userVersion = editElem.innerHTML;
    
    // 读取LocalStorage中已保存的内容，无数据则初始化为空字符串
    var existingEdits = localStorage.getItem('userEdits') || '';
    
    // 将新内容追加到已有内容后，用<br>分隔每次的编辑内容（可按需调整分隔符）
    var updatedEdits = existingEdits + (existingEdits ? '<br>' : '') + userVersion;
    
    // 将合并后的内容存入LocalStorage
    localStorage.setItem('userEdits', updatedEdits);
    
    // 提示保存成功
    document.getElementById("update").innerHTML = "Edits saved!";
}

function checkEdits() {
    // 加载时读取累计的保存内容并显示
    var savedEdits = localStorage.getItem('userEdits');
    if (savedEdits) {
        document.getElementById("edit").innerHTML = savedEdits;
    }
}

关键修改说明： #

• 改用localStorage.getItem()和localStorage.setItem()方法操作存储，这是标准的API使用方式，比直接赋值更可靠。
• 保存前先读取已有存储内容，避免直接覆盖。如果是首次存储，existingEdits会被设为空字符串。
• 添加了判断：如果已有内容不为空，才添加<br>分隔符，避免首次存储时出现多余的换行。
• 加载时显示所有累计保存的内容，而不是最后一次的内容。

如果需要调整追加的格式（比如用纯文本换行、分隔线等），只需要修改拼接时的分隔符即可。

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