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.
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
><span >${title}</span> ⏤ <span >${author}</span> ⏤ <span >${pages} Pages</span></span
>
<button >Unread</button>
<button type="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 >
<img src="img/Open Book.png" alt="open book icon" />
<h2>Book Library</h2>
</div>
<form action="#" autocomplete="off">
<div >
<div >
<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 >
<li >
<span
><span >The Catcher in the Rye</span> ⏤
<span >J. D. Salinger</span> ⏤
<span >277 Pages</span></span
>
<button >Unread</button>
<button type="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 >
Your Book Library is empty, add some more books!