如何保存对多个可编辑元素的更改？

Question

我想使照片标题可编辑，然后将更改保存在本地存储中。它适用于第一张照片，但是当我要编辑另一张照片时，更改将保存到该第一张照片，而不是我编辑的照片。这是我的代码的一部分，在其中显示带标题的照片：

<div class="gallery">
   <a href="<?=$path1; ?>">
      <img src="<?= $path1; ?>">
   </a>
   <div id="contenteditable">
      <p id="caption-photo" contenteditable> <?=pathinfo($path1, PATHINFO_FILENAME)?></p>
   </div>
</div>

这是我的js代码，保存更改：

const editables = document.querySelectorAll("[contenteditable]");
        editables.forEach(el => {
        el.addEventListener("blur", () => {
            localStorage.setItem("dataStorage-" + el.id, el.innerHTML);
        })
        });
        for (var key in localStorage) {
            if (key.includes("dataStorage-")) {
                const id = key.replace("dataStorage-","");
                document.querySelector("#" + id).innerHTML = localStorage.getItem(key);
            }
        }    

Answer 1

这里是一个建议：假设您的foreach循环是：