Trying to save an array from a class in local storage and retrieve it on load

I’m trying to set an item within local storage and have it be able to update every time the user either adds a new book, deletes a book, or changes the read status of the book.

So far i have added an array within the Books class and set its value to get the item from the local storage if there is one already and if not, the array will be empty. I also added a method to the same class which is suppose to set the item into local storage as well as turn it into a sting via the JSON method but it does not seem to save it because when i inspect it and look into the local storage its length is equal to 0.

const libraryDOM = {
    bookDisplay: document.getElementById("book-display"),
    addBookBtn: document.getElementById("new-book"),
    titleInput: document.getElementById("title"),
    titleError: document.getElementById("title-error"),
    authorInput: document.getElementById("author"),
    authorError: document.getElementById("author-error"),
    pagesInput: document.getElementById("pages"),
    pagesError: document.getElementById("pages-error"),
    bookForm: document.getElementById("form"),
    subBtn: document.getElementById("submit-btn")
};

class Book {
    constructor(name, author, pages) {
        this.name = name;
        this.author = author;
        this.pages = pages;
        this.read = false;
    }
    get nameOfBook() {
        return this.name;
    }
    get authorOfBook() {
        return this.author;
    }
    get numOfPages() {
        return this.pages;
    }
}

class Books {
    constructor() {
        this.bookArr = JSON.parse(localStorage.getItem("bookArr")) || [];
    }
    addBookToArray(name, author, pages) {
        let book = new Book(name, author, pages);
        this.bookArr.push(book);
        this.saveBooksToLocalStorage(); // Save books to local storage after updating
        return book;
    }
    changeReadStatus(book) {
        book.read = true; // Set the read status
        this.saveBooksToLocalStorage(); // Save books to local storage after updating
    }
    saveBooksToLocalStorage() {
        localStorage.setItem("bookArr", JSON.stringify(this.bookArr));
    }
    get allBooks() {
        return this.bookArr;
    }
}

let newBook = new Books();
let bookArray = newBook.allBooks;

function renderBooks(book) {
    const newBookDiv = document.createElement("div");
    const dltBtn = document.createElement("button");
    const readBtn = document.createElement("button");
    newBookDiv.textContent = book.nameOfBook + " " + book.authorOfBook + " " + book.numOfPages;
    newBookDiv.classList.add("book");
    dltBtn.textContent = "Delete";
    readBtn.textContent = "Read";
    newBookDiv.append(dltBtn, readBtn);
    libraryDOM.bookDisplay.append(newBookDiv);
    dltBtn.addEventListener("click", (i) => {
        if (bookArray[i] == dltBtn[i]) {
            bookArray.splice(bookArray.indexOf(book), 1);
            newBookDiv.remove();
            dltBtn.remove();
            newBook.saveBooksToLocalStorage(); // Save books to local storage after updating
            console.log(bookArray);
        }
    });
    readBtn.addEventListener("click", (i) => {
        if (bookArray[i] == readBtn[i]) {
            newBook.changeReadStatus(book);
            console.log(bookArray);
        }
    });
}

libraryDOM.addBookBtn.addEventListener("click", addBook);
libraryDOM.subBtn.addEventListener("click", submitBook);

function addBook() {
    libraryDOM.bookForm.style.visibility = "visible";
    console.log("click");
}

function submitBook(e) {
    const title = libraryDOM.titleInput.value;
    const author = libraryDOM.authorInput.value;
    const pages = libraryDOM.pagesInput.value;
    if (libraryDOM.titleInput.validity.valueMissing) {
        libraryDOM.titleError.style.display = "flex";
        e.preventDefault();
    } else { 
        libraryDOM.titleError.style.display = "none"; 
        e.preventDefault();
    }
    if (libraryDOM.authorInput.validity.valueMissing) {
        libraryDOM.authorError.style.display = "flex";
        e.preventDefault();
    } else {
        libraryDOM.authorError.style.display = "none";
        e.preventDefault();
    }
    if (libraryDOM.pagesInput.validity.valueMissing) {
        libraryDOM.pagesError.style.display = "flex";
        e.preventDefault();
    } else {
        libraryDOM.pagesError.style.display = "none";
        e.preventDefault();
    }
    if (libraryDOM.titleInput.validity.valid &&
        libraryDOM.authorInput.validity.valid &&
        libraryDOM.pagesInput.validity.valid) {
        const pushBooks = newBook.addBookToArray(title, author, pages);
        libraryDOM.bookForm.style.visibility = "hidden";
        renderBooks(pushBooks);
        console.log(bookArray);
        e.preventDefault();
    }
}

bookArray.forEach(renderBooks);