title: display information from localStorage
body: <p>I am having trouble wrapping my head around how to use localStorage (since it is the first time I use it) to store an array of objects in localStorage, but mainly how to get that information and display it even after refreshing the page . right now I can see it is being stored but no displayed.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const bookList = document.querySelector(".booklist");
  const bookCards = document.querySelector(".booklist__books");
  let library = JSON.parse(localStorage.getItem("library") ?? "[]");
  
  // ---------------------- Book Constructor -------------------------------
  class Book {
    constructor(title, author, pages, status) {
      this.title = title;
      this.author = author;
      this.pages = pages;
      this.status = status;
    }
  }
  
  // ---------------------- Add a new book to list -------------------------------
  
  bookList.addEventListener("submit", (event) =&gt; {
    event.preventDefault();
  
    const title = document.getElementById("new-book").value.trim();
    const author = document.getElementById("author").value.trim();
    const pages = document.getElementById("pages").value.trim();
    const status = "Unread";
  
    if (!title) return;
    if (!author) return;
    if (!pages) return;
  
    const book = new Book(title, author, pages, status);
  
    library.push(book);
  
    const bookElement = document.createElement("li");
    const bookCollection = bookList.querySelector(".booklist__books");
    bookElement._book = book;
  
    library.forEach((book) =&gt; {
      bookElement.classList.add("book");
      bookElement.innerHTML = DOMPurify.sanitize(` &lt;span class="book__info"
        &gt;&lt;span class="title_info"&gt;${title}&lt;/span&gt; ⏤ &lt;span class="author_info"&gt;${author}&lt;/span&gt; ⏤ &lt;span class="pages_info"&gt;${pages} Pages&lt;/span&gt;&lt;/span
      &gt;
      &lt;button class="book__read-button"&gt;Unread&lt;/button&gt;
      &lt;button type="button" class="book__delete-button"&gt;
        &lt;svg
          xmlns="http://www.w3.org/2000/svg"
          width="192"
          height="192"
          fill="#fff"
          viewBox="0 0 256 256"
        &gt;
          &lt;rect width="256" height="256" fill="none"&gt;&lt;/rect&gt;
          &lt;line
            x1="200"
            y1="56"
            x2="56"
            y2="200"
            stroke="#fff"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="30"
          &gt;&lt;/line&gt;
          &lt;line
            x1="200"
            y1="200"
            x2="56"
            y2="56"
            stroke="#fff"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="30"
          &gt;&lt;/line&gt;
        &lt;/svg&gt;
      &lt;/button&gt;`);
      bookCollection.appendChild(bookElement);
  
      clearInputs();
      document.getElementById("new-book").focus();
      localStorage.setItem("library", JSON.stringify(library));
    });
  });
  
  function clearInputs() {
    document.querySelector("#new-book").value = "";
    document.querySelector("#author").value = "";
    document.querySelector("#pages").value = "";
  }
  
  //-------------------Toggle Read or Unread Button --------------------------
  
  bookList.addEventListener("click", (e) =&gt; bookEdit(e));
  
  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";
      //update object
      if (event.target.parentNode._book)
        event.target.parentNode._book.status = event.target.textContent;
      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);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,700"
      /&gt;
  
      &lt;link rel="stylesheet" href="styles.css" /&gt;
      &lt;title&gt;Book Library&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;main&gt;
        &lt;div class="top"&gt;
          &lt;img src="img/Open Book.png" alt="open book icon" /&gt;
          &lt;h2&gt;Book Library&lt;/h2&gt;
        &lt;/div&gt;
  
        &lt;form action="#" class="booklist" autocomplete="off"&gt;
          &lt;div class="booklist__new-book"&gt;
            &lt;div class="new-book__input-group"&gt;
              &lt;label for="new-book"&gt;Add a Book&lt;/label&gt;
              &lt;input
                type="text"
                id="new-book"
                name="new-book"
                placeholder="Book name"
              /&gt;
              &lt;input type="text" id="author" name="author" placeholder="Author" /&gt;
              &lt;input
                type="number"
                id="pages"
                name="pages"
                placeholder="Number of Pages"
              /&gt;
            &lt;/div&gt;
  
            &lt;button type="submit" id="submit"&gt;
              &lt;svg
                xmlns="http://www.w3.org/2000/svg"
                width="192"
                height="192"
                fill="#000000"
                viewBox="0 0 256 256"
              &gt;
                &lt;rect width="256" height="256" fill="none"&gt;&lt;/rect&gt;
                &lt;line
                  x1="40"
                  y1="128"
                  x2="216"
                  y2="128"
                  fill="none"
                  stroke="#000000"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="30"
                &gt;&lt;/line&gt;
                &lt;line
                  x1="128"
                  y1="40"
                  x2="128"
                  y2="216"
                  fill="none"
                  stroke="#000000"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="30"
                &gt;&lt;/line&gt;
              &lt;/svg&gt;
              &lt;span&gt;Add Book&lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
  
          &lt;!-- List of Books --&gt;
          &lt;ul class="booklist__books"&gt;
            &lt;li class="book"&gt;
              &lt;span class="book__info"
                &gt;&lt;span class="title_info"&gt;The Catcher in the Rye&lt;/span&gt; ⏤
                &lt;span class="author_info"&gt;J. D. Salinger&lt;/span&gt; ⏤
                &lt;span class="pages_info"&gt;277 Pages&lt;/span&gt;&lt;/span
              &gt;
              &lt;button class="book__read-button"&gt;Unread&lt;/button&gt;
              &lt;button type="button" class="book__delete-button"&gt;
                &lt;svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="192"
                  height="192"
                  fill="#fff"
                  viewBox="0 0 256 256"
                &gt;
                  &lt;rect width="256" height="256" fill="none"&gt;&lt;/rect&gt;
                  &lt;line
                    x1="200"
                    y1="56"
                    x2="56"
                    y2="200"
                    stroke="#fff"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="30"
                  &gt;&lt;/line&gt;
                  &lt;line
                    x1="200"
                    y1="200"
                    x2="56"
                    y2="56"
                    stroke="#fff"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="30"
                  &gt;&lt;/line&gt;
                &lt;/svg&gt;
              &lt;/button&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="booklist__empty-state"&gt;
            Your Book Library is empty, add some more books!
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/main&gt;
      &lt;!-- Adds DOMPurify library --&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/1.0.7/purify.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>thanks in advance!</p>