筆記應用程序：編輯筆記並更新到本地存儲（替換）

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] 。

更容易（不太可能出現奇怪的錯誤），但也更快（全部在恆定時間內）。 合適的工具適合合適的工作。

希望這可以幫助！