如何在瀏覽器的存儲中存儲（類類型的）對象並檢索它？

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()
}

我知道localStorage ES6可以存儲字符串。 我是否必須編寫自己的復雜類對象的反序列化？ 就像（我認為）在這里建議的那樣： Angular 2映射http對類實例的響應

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. 將服務作為依賴項注入組件，如下所示

    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') } 

現場演示

Answer 2

使用localStorage可以執行以下操作：

import { Component, OnInit } from '@angular/core';
class Bar {
   baz: number = 11;
}
class Foo {
   bar: Bar = new Bar()
}
@Component({
  selector: 'a-component',
  template: `<br><button (click)='reset()'>Reset</button>`
})
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)
  }
}

使用localStorage可以存儲所需的任何復雜對象。

希望這可以幫助！

Answer 3

你的問題

我不完全了解您要如何處理櫃台。 因此，我繼續為您制作了一個簡單的示例，介紹了一種處理計數器並將其保存到localStorage 。

在我的示例中，我向您展示了如何將數據另存為JSON以及如何在檢索數據時進行處理。

我的解決方案

我為您制作了一個punker，直到您完成為止。 檢查元素時，必須查看開發工具中的“應用程序”選項卡。 然后轉到存儲。 然后單擊run.plnkr.co存儲鏈接以查看計數器已保存到本地主機。

鏈接到實時代碼

請在這里看到塞子。

確保查看文件/src/app.ts

着眼於例子

代碼示例

//our root app component
import {Component, NgModule, OnInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  foo: Foo = new Foo();
  ngOnInit() {
    // This will always be 12, it would be nice if it would increase with each page refresh.

    var counter = JSON.parse(localStorage.getItem('counter'));
    var tick = this.foo.bar.baz + counter + 1;
    localStorage.setItem('counter', JSON.stringify(tick));
    console.log('this is my tick ' + tick);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}


class Bar {
  baz: number = 11;
}

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