How to store a complex object javascript

Question

I have a complex object of this type:

class Person {
  constructor(name, age, country) {
    this.name = name;
    this.age = age;
    this.country = country;
  }
  
  setName(name) {
    if (name !== null) this.name = name;
  }
  setAge(age) {
    if (age !== null) this.age = age;
  }
  setCountry(country) {
    if (country !== null) this.country = country;
  }
  
  getName() {
    return this.name;
  }
  
  // ...
}

let person = new Person('Paul', 27, 'Haïti'); // needs to save this Object
console.log(person);

So I would like to know if anyone has an idea on how I can store this Object so that I can access it the next time I open the browser. localStorage doesn't work.

Store the constructor parameters (or make it serialise to this), store those in localstorage, then re-initialise from the constructor parameters. This can also be modified so the constructor (or a factory function) takes JSON, so the object can be serialised to JSON. — VLAZ
– VLAZ, Commented Jun 23, 2022 at 10:13
of course, if you do store the constructor parameters in localStorage, and then call setName or setAge etc, you'll need to update localStorage with the new values — Bravo
– Bravo, Commented Jun 23, 2022 at 10:15

Bravo · Accepted Answer · 2022-06-23 10:29:15Z

localStorage does work - you just need to use it properly

I added a toJSON method on the class - this returns an array with the constructor parameter values in the right order

class Person {
    constructor(name, age, country) {
        this.name = name;
        this.age = age;
        this.country = country;
    }
    toJSON() {
        return [this.name, this.age, this.country];
    }
    setName(name) {
        if (name !== null) this.name = name;
    }
    setAge(age) {
        if (age !== null) this.age = age;
    }
    setCountry(country) {
        if (country !== null) this.country = country;
    }
    getName() {
        return this.name;
    }
}

To save

const person = new Person("John", 23, "Aussie");
localStorage.setItem('test', JSON.stringify(person));

To load

const revivedPerson = new Person(...JSON.parse(localStorage.getItem('test')));

You don't have to make the toJSON method, but it makes for simple code (if you never need to JSON.stringify an instance of Person)

trincot · Accepted Answer · 2022-06-23 10:31:27Z

0

I'd add a static method to the class, that can take a plain object and return an instance of the class in return. You can use Object.create and Object.assign for that.

Demo:

class Person {
  constructor(name, age, country) {
    this.name = name;
    this.age = age;
    this.country = country;
  }
  static from(obj) {
    return Object.assign(Object.create(this.prototype), obj);
  }
  getName() {
    return this.name;
  }
  // ...
}

// Demo
let person = new Person('Paul', 27, 'Haïti');
let serialised = JSON.stringify(person);
// ... write/read serialised to/from localStorage ...
// and then:
let person2 = Person.from(JSON.parse(serialised));
console.log(person2.getName());

answered Jun 23, 2022 at 10:31

trincot

357k38 gold badges282 silver badges338 bronze badges

2 Comments

Madel M6TM Over a year ago

Thank but i use some library. I use tui calendar so cannot modify some thing inside

trincot Over a year ago

OK, but you can use a function outside the class instead of a static function on the class. If you have a problem with a specific class/instance, then you should really mention that (with example code) in your question. For instance, if it is a date, then just save the date as a string, and when you load it, set the appropriate property in your calendar object. But this is rather specific, and not related to your question as it stands (Person).

Collectives™ on Stack Overflow

How to store a complex object javascript

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related