How to use localStorage on array of objects

Reddi

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);
 });
Ru Chern Chong

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)

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to save array of objects in localstorage

array of unique objects to localStorage

How to save an array of objects in localStorage? Getting TypeError: push is not a function

How can I access a value in my array of objects in localstorage?

How can I get the index of a localstorage array and use it with a filtered array?

How to use an array of objects in vb

How to use objects in an array (php)?

how to use an array of objects in javascript

how to use explode for an array of objects

How to use an array of strings to filter an array of objects?

How to use localStorage with numbers

How to use localStorage in jquery?

How to use localStorage in Vue?

how to Use LocalStorage with Angular

How to use map to get an array of objects from a parent array of objects

How to use _sortBy in an array of objects that contains nested array of objects

Save array of objects to javascript localStorage not working

Retrieving an array of objects from localstorage in angularjs

how to use filter on array of objects in javascript

How to create an array of image objects to use in a FOR loop?

How to use $addToSet become an array with objects?

How to use ngFor to iterate over array of objects

How to use Django's APIRequestFactory with an array of objects?

How to use Jackson to deserialise an array of objects

How to use forEach method for objects in array in JavaScript?

How to use $nin operator with objects in array

how to decide when to use array or objects in javascript

indexeddb , how to use a cursor to update an array of objects

How to use $map over an array of objects in an aggregation?