How to store an object (of a class type) in browser's storage and retrieve it?

Question

I want to have a page-reload proof class instances in my Angular 2 application.

In my component\'s .ts file I have classes:

export class AComponent i         


        

Answer 1

using localStorage you can do this:

import { Component, OnInit } from '@angular/core';
class Bar {
   baz: number = 11;
}
class Foo {
   bar: Bar = new Bar()
}
@Component({
  selector: 'a-component',
  template: `
Reset`
})
export class AComponent implements OnInit{ 
  foo: Foo = new Foo();
  constructor(){
       this.incrementBaz()
  }
  ngOnInit(): void {
    this.foo = JSON.parse(localStorage.getItem('foo'))
    console.log('baz=', this.foo.bar.baz)
  }
  incrementBaz() {
    let old = JSON.parse(localStorage.getItem('foo'))
    if (old) {
        old.bar.baz += 1;
        localStorage.setItem('foo', JSON.stringify(old))    
    }
    else {
        localStorage.setItem('foo', JSON.stringify(this.foo))
    }
  }
  reset() {
    this.foo = new Foo();
    localStorage.setItem('foo', JSON.stringify(this.foo))
    console.log('baz=', this.foo.bar.baz)
  }
}

with localStorage you can store whatever complex object you want.

hope this helps!