Set custom Object properties locally, outside of Parse Object's attributes

I need to add an extra property to my Parse object, without using the object.set() and without firing the object.isDirty()

let’s assume I have an object “Book” and some properties including a relation to the “Author” class.
To avoid making many subqueries, I cache locally the “_authorNames”.


    var relation = book.relation("authors");
    var query = relation.query();
    var authorUsers = await query.find();
    var authorNames = => item.get('name'));
    book._authorNames = authorNames.join(', '); 

On my front end, in Anglular, I’m printing:

<h1>{{book.get('title')}}</h1><h2>Authors: {{book._authorNames}}</h2>

Then I try to save the object in the local data storage

const jsonData = JSON.stringify(book)
localStorage.setItem('book_', jsonData)

but jsonData does not have the _authorNames attribute.

This happens because the toJSON() function (here) creates an object that only takes createdAt, updatedAt, and id.

I also tried:

To set the property via the standard .set()

book.set('_authorNames', book.get('author').get('name')); 

but if and when I save the object, it will add the ‘_authorNames’ column to the server

To set the property in the attributes

book.attributes._authorNames = book.get('author').get('name'); 

but if and when I stringify it, surprisingly, the _authorNames is not there

How can I set a custom object property safely, that allows me to save and restore the object?

I’d not recommend to do that. Why don’t store on a separate structure? Something like:

const jsonData = JSON.stringify({book, additionalData})
localStorage.setItem('book_', jsonData)