javascript - 如何在浏览器存储中存储(类类型)对象并检索它？

Question

我想在我的 Angular 2 应用程序中拥有一个页面重新加载证明类实例。

在我的组件的 .ts 文件中，我有类:

export class AComponent implements OnInit {
  foo: Foo = new Foo();
  ngOnInit() {
    // This will always be 12, it would be nice if it would increase with each page refresh.
    this.foo.bar.baz += 1;
    console.log("baz: " + this.foo.bar.baz);
  }
}

class Bar {
  baz: number = 11;
}

class Foo {
  bar: Bar = new Bar()
}

我知道 ES6 的 localStorage 可以存储字符串。我是否必须自己编写复杂类对象的反序列化？ 就像(我认为)这里建议的:Angular 2 map http response to instance of class

Answer 1

我建议使用 angular-2-local-storage node_module。

步骤:

1. 安装npm install angular-2-local-storage
2. 确保该包已添加到 config.js(systemjs 或 webpack)中

3. 导入模块和服务如下

   import { LocalStorageModule,LocalStorageService} from 'angular-2-local-storage';
   

4. 添加模块以导入数组和服务到提供者数组

    imports: [ BrowserModule,
      LocalStorageModule.withConfig({storageType: 'localStorage'}), ],
   
    providers:[LocalStorageService],
   

5. 将服务作为依赖项注入(inject)到组件中，如下所示

   constructor(private localStorageService: LocalStorageService) {
           this.name = 'Angular-2-Local-Storage-Demo';
           this.localStorageService.add('a',this.user);
           console.log(this.localStorageService.get('a')); 
           this.valuFromLocalStorage= this.localStorageService.get('a')
   }
   

<强> LIVE DEMO