I am working on a book library app that users can add books etc, and update whether the book has been read or not by clicking a button.

The button changes style and textContent based on a button click event. It works and it updates the button ui as well as the status field of each book, but as soon as it is saved to local storage and the page reloads the button is reset and does not take into account the status field, it won't update it anymore after loading from local storage.

here is the code responsible for updating read status as well as deleting books(which works fine):

function bookEdit(event) {
  if (event.target.classList.contains("book__read-button")) {
    console.log(event.target);
    event.target.classList.toggle("clicked");
    event.target.textContent =
      event.target.textContent == "Unread" ? "Read" : "Unread";
    localStorage.setItem("library", JSON.stringify(library));
    //update object
    if (event.target.parentNode._book)
      event.target.parentNode._book.status = event.target.textContent;

    localStorage.setItem("library", JSON.stringify(library));
    console.log(library);
  }
  //-------------------Deleting Books --------------------------

  if (event.target.matches(".book__delete-button")) {
    const bookElement = event.target.parentElement;
    bookCards.removeChild(bookElement);
    const position = library.indexOf(event.target.parentNode._book);
    library.splice(position, 1);
    localStorage.setItem("library", JSON.stringify(library));

    if (bookCards.children.length === 0) {
      bookCards.innerHTML = "";
    }

    console.log(library);
  }
}

here is the JSFiddle in case you want to see the entire app.

https://jsfiddle.net/chili6/182tkLrx/14/

thanks in advance