笔记应用程序：编辑笔记并更新到本地存储（替换）

Question

我正在冒险创建一个笔记应用程序。 目前，我可以添加注释，将其保存到本地存储并显示，但我希望能够编辑并更新回本地存储。 注释在“弹出窗口”window 中捕获，然后显示在页面中。 尝试了一系列的事情，但没有成功。

我知道我正在使用构造函数/数组并了解如何更新 arrays 的最后和第一个索引，但是当涉及到输入时，它似乎更复杂。 非常感谢任何帮助。

 const noteListDiv = document.querySelector(".note-list"); let noteID = 1; function Note(id, title, content) { this.id = id; this.title = title; this.content = content; } function eventListeners() { document.addEventListener("DOMContentLoaded", displayNotes); document.getElementById("send").addEventListener("click", addNewNote); // document.querySelector(".edit").addEventListener("click", updateNote); noteListDiv.addEventListener("dblclick", deleteNote); // document.querySelector(".delete-all-btn").addEventListener("click", deleteAllNotes); } function getDataFromStorage() { return localStorage.getItem("notes")? JSON.parse(localStorage.getItem("notes")): []; } function createNote(noteItem) { const div = document.createElement("div"); div.classList.add("note-item"); div.setAttribute("data-id", noteItem.id); div.innerHTML = ` <h3 contenteditable = "true" class="card-title-area">${noteItem.title}</h3><br> <p contenteditable = "true" class="card-note-area">${noteItem.content}</p><br> <div id="display-value"></div> <button type = "button" class = "btn delete-note-btn"> <span><i class = "fas fa-trash"></i></span> Delete </buttton> <button type = "button" class="btn edit"> <span><i class="fas fa-edit"></i></span> Edit </button> `; noteListDiv.appendChild(div); } eventListeners(); function addNewNote() { const noteTitle = document.getElementById("title-inb"); const noteContent = document.getElementById("note-inb"); if (validateInput(noteTitle, noteContent)) { let notes = getDataFromStorage(); let noteItem = new Note(noteID, noteTitle.value, noteContent.value); noteID++; notes.push(noteItem); createNote(noteItem); // saving in the local storage localStorage.setItem("notes", JSON.stringify(notes)); noteTitle.value = ""; noteContent.value = ""; } } function updateNote() { const cardNote = document.querySelectorAll(".card-note-area").value const cardTitle = document.querySelectorAll(".card-title-area").value if (validateInput(cardNote, cardTitle)) { let notes = getDataFromStorage(); let noteItem = new Note(noteID, cardNote.value, cardTitle.value); noteID++; notes.push(noteItem); // saving in the local storage localStorage.setItem("notes", JSON.stringify(notes)); cardTitle.value = ""; cardNote.value = ""; } } function validateInput(title, content) { if (title.value.== "" && content;value.== "") { return true. } else { if (title.value === "") title;classList.add("warning"). if (content.value === "") content;classList.add("warning"). } setTimeout(() => { title;classList.remove("warning"). content;classList,remove("warning"); }; 1600). } function displayNotes() { let notes = getDataFromStorage(). if (notes.length > 0) { noteID = notes[notes;length - 1];id; noteID++. } else { noteID = 1; } notes;forEach(item => { createNote(item). }). } // delete a note function deleteNote(e) { if (e.target.classList.contains("delete-note-btn")) { e.target;parentElement.remove(). let divID = e.target.parentElement;dataset;id. let notes = getDataFromStorage(). let newNotesList = notes;filter(item => { return item;id.== parseInt(divID), }). localStorage;setItem("notes", JSON.stringify(newNotesList)); } }

 <div class="note-list"> </div>

Answer 1

这是updateNote function。修改了现有代码以使功能正常工作。

function updateNote() {

  const cardNote = document.querySelectorAll(".card-note-area").value
  const cardTitle = document.querySelectorAll(".card-title-area").value

  // to update a note, you need to be able to reference it somehow.
  // since this note already exists, we want to use the id it has (not create a new one).
  //
  // now i'm not sure how the data flow is structured in this project 
  // (idk if this is the correct way here to retrieve the id of the note). 
  // Point is, you wanna extract that note's existing id somehow.
  const id = document.querySelectorAll('.note-item').getAttribute('data-id');


  if (validateInput(cardNote, cardTitle)) {
    const oldNotes = getDataFromStorage();

    const newNoteItem = new Note(id, cardNote.value, cardTitle.value);
    
    // We're updating a note, not creating one, so no need to increment here
    // noteID++;

    // we remove the old note from the array
    const newNotes = oldNotes.filter(note => note.id !== id);

    // we now push our note with new data (but the same old id) in the array
    // take care of saving the new array, not the old one.
    newNotes.push(newNoteItem);

    // saving in the local storage 
    localStorage.setItem("notes", JSON.stringify(newNotes));
    cardTitle.value = "";
    cardNote.value = "";


  }
}

PS：还没有测试过这个。 并且不关心固定样式或最佳实践或任何东西，只是修改那里的东西。

另外：如果您使用哈希图/字典而不是数组来记录笔记，这会更容易。

然后你可以做这样的事情： notesMap[id] = /* your note */ ，当创建或更新时， delete notesMap[id] 。

更容易（不太可能出现奇怪的错误），但也更快（全部在恒定时间内）。 合适的工具适合合适的工作。

希望这可以帮助！