尝试使用ngxs将对象安全保存到localStorage

npm install @ngxs/store

import { NgxsModule } from '@ngxs/store';
import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';

@NgModule({
  imports: [
    NgxsModule.forRoot([]),
    NgxsStoragePluginModule.forRoot()
  ],
  // ...
})
export class AppModule { }

import { State, Action, StateContext } from '@ngxs/store';

export class MyStateModel {
  // 定义需要保存到localStorage的对象属性
  public myObject: any;
}

@State<MyStateModel>({
  name: 'myState',
  defaults: {
    myObject: null
  }
})
export class MyState {
  @Action(SetMyObject)
  setMyObject(ctx: StateContext<MyStateModel>, action: SetMyObject) {
    ctx.patchState({
      myObject: action.payload
    });
  }
}

export class SetMyObject {
  static readonly type = '[MyState] Set My Object';
  constructor(public payload: any) { }
}

import { Component } from '@angular/core';
import { Select, Store } from '@ngxs/store';
import { SetMyObject } from './my-state';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="saveObject()">Save Object</button>
  `
})
export class MyComponent {
  @Select(state => state.myState.myObject) myObject$;

  constructor(private store: Store) { }

  saveObject() {
    const myObject = { name: 'John', age: 30 };
    this.store.dispatch(new SetMyObject(myObject));
  }
}