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 not displayed.

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) => {
  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) => {
    bookElement.classList.add("book");
    bookElement.innerHTML = DOMPurify.sanitize(` <span class="book__info"
      ><span class="title_info">${title}</span> ⏤ <span class="author_info">${author}</span> ⏤ <span class="pages_info">${pages} Pages</span></span
    >
    <button class="book__read-button">Unread</button>
    <button type="button" class="book__delete-button">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="192"
        height="192"
        fill="#fff"
        viewBox="0 0 256 256"
      >
        <rect width="256" height="256" fill="none"></rect>
        <line
          x1="200"
          y1="56"
          x2="56"
          y2="200"
          stroke="#fff"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="30"
        ></line>
        <line
          x1="200"
          y1="200"
          x2="56"
          y2="56"
          stroke="#fff"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="30"
        ></line>
      </svg>
    </button>`);
    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) => 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);
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,700"
    />

    <link rel="stylesheet" href="styles.css" />
    <title>Book Library</title>
  </head>
  <body>
    <main>
      <div class="top">
        <img src="img/Open Book.png" alt="open book icon" />
        <h2>Book Library</h2>
      </div>

      <form action="#" class="booklist" autocomplete="off">
        <div class="booklist__new-book">
          <div class="new-book__input-group">
            <label for="new-book">Add a Book</label>
            <input
              type="text"
              id="new-book"
              name="new-book"
              placeholder="Book name"
            />
            <input type="text" id="author" name="author" placeholder="Author" />
            <input
              type="number"
              id="pages"
              name="pages"
              placeholder="Number of Pages"
            />
          </div>

          <button type="submit" id="submit">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="192"
              height="192"
              fill="#000000"
              viewBox="0 0 256 256"
            >
              <rect width="256" height="256" fill="none"></rect>
              <line
                x1="40"
                y1="128"
                x2="216"
                y2="128"
                fill="none"
                stroke="#000000"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="30"
              ></line>
              <line
                x1="128"
                y1="40"
                x2="128"
                y2="216"
                fill="none"
                stroke="#000000"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="30"
              ></line>
            </svg>
            <span>Add Book</span>
          </button>
        </div>

        <!-- List of Books -->
        <ul class="booklist__books">
          <li class="book">
            <span class="book__info"
              ><span class="title_info">The Catcher in the Rye</span> ⏤
              <span class="author_info">J. D. Salinger</span> ⏤
              <span class="pages_info">277 Pages</span></span
            >
            <button class="book__read-button">Unread</button>
            <button type="button" class="book__delete-button">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="192"
                height="192"
                fill="#fff"
                viewBox="0 0 256 256"
              >
                <rect width="256" height="256" fill="none"></rect>
                <line
                  x1="200"
                  y1="56"
                  x2="56"
                  y2="200"
                  stroke="#fff"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="30"
                ></line>
                <line
                  x1="200"
                  y1="200"
                  x2="56"
                  y2="56"
                  stroke="#fff"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="30"
                ></line>
              </svg>
            </button>
          </li>
        </ul>
        <div class="booklist__empty-state">
          Your Book Library is empty, add some more books!📚
        </div>
      </form>
    </main>
    <!-- Adds DOMPurify library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/1.0.7/purify.min.js"></script>

    <script src="script.js"></script>
  </body>
</html>

thanks in advance!

3

You can get the item from local storage using:

localStorage.getItem("library");

then, if to use it, simply parse the JSON string, like so:

const library  = localStorage.getItem("library");
if(library){
     const arr = JSON.parse(lib); //convert JSON string to array
     console.log(arr); //use the array however you want
}

Not the answer you’re looking for? Browse other questions tagged javascript or ask your own question.