How to use localStorage on array of objects

Question

I have a problem, I really do not know how to create localStorage on objects in array. I know that localStorage is used only for strings, but I am creating a new book which is an object. How to do it? Should I change that book to do not use constructor and just use setters and use localStorage on them or how?

class Book {
    constructor(title, author, isbn) {
     this.title = title;
     this.author = author;
     this.isbn = isbn;
  }
}

class UI {
static displayBooks() {
    const storedBooks = [
        {
            title: 'Book one',
            author: 'John Doe',
            isbn: '343'
        },
        {
            title: 'Book two',
            author: 'Jane Doe',
            isbn: '455'
        }
    ];

    storedBooks.forEach((book) => UI.addBookToList(book));
}

static addBookToList(book) {
    const list = document.querySelector('#book-list');

    const row = document.createElement('tr');
    row.innerHTML = `
        <td>${book.title}</td>
        <td>${book.author}</td>
        <td>${book.isbn}</td>
        <td><a href="#" class="btn btn-danger btn-sm delete">X</a></td>
    `;

    list.appendChild(row);
}

static deleteBook(el) {
    if (el.classList.contains('delete')) {
        el.parentElement.parentElement.remove();
    }
}

static clearFields() {
    document.querySelector('#title').value = '';
    document.querySelector('#author').value = '';
    document.querySelector('#isbn').value = '';
}

static validateForm() {
    const title = document.querySelector('#title').value;
    const author = document.querySelector('#author').value;
    const isbn = document.querySelector('#isbn').value;

    if (title === '' || author === '' || isbn === '') {
        const div = document.createElement('div');
        div.className = 'alert alert-dismissible alert-danger';
        const message = document.createTextNode('Please fill all fields 
        before adding.');
        div.appendChild(message);

        const bookForm = document.querySelector('#book-form');
        bookForm.parentNode.insertBefore(div, bookForm);


        setTimeout(() => bookForm.parentNode.removeChild(div), 3000);

        return false;
    }

    return true;
   }
 }

document.addEventListener('DOMContentLoaded', UI.displayBooks);

// Add a new book
document.querySelector('#book-form').addEventListener('submit', (e) => {

e.preventDefault();

const title = document.querySelector('#title').value;
const author = document.querySelector('#author').value;
const isbn = document.querySelector('#isbn').value;

const book = new Book(title, author, isbn);

let isSuccess = UI.validateForm();

if (isSuccess) {
    UI.addBookToList(book);        
}

UI.clearFields();
});

document.querySelector('#book-list').addEventListener('click', (e) => {
console.log(e.target);
UI.deleteBook(e.target);
 });

Answer 1

You can use the JSON.stringify() function to help you with this.

An example of the code below:

const bookObj = JSON.stringify(bookObject)
window.localStorage.setItem('book', bookObj)