如何在浏览器的存储中存储对象（类类型）并检索它？ [英] How to store an object (of a class type) in browser's storage and retrieve it?

问题描述

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

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

  export class AComponent实现OnInit {
 foo：Foo = new Foo（）; 
 ngOnInit（）{
 //这将永远是12，如果每次页面刷新都会增加，那就太好了。 
 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的东西可以存储字符串。我是否必须编写自己的复杂类对象的反序列化？
喜欢（我认为）建议：

代码示例

  //我们的根应用程序组件
 import {Component，NgModule，OnInit}来自'@ angular / core'
 import来自'@ angular / platform-b​​rowser'的{BrowserModule} 
 
 @Component（{
选择器：'my-app'，
模板：`
< div> ; 
< h2> Hello {{name}}< / h2> 
< / div> 
`，
}）
导出类App {
 foo：Foo = new Foo（）; 
 ngOnInit（）{
 //这将永远是12，如果每次页面刷新都会增加，那就太好了。 
 
 var counter = JSON.parse（localStorage.getItem（'counter'））; 
 var tick = this.foo.bar.baz + counter + 1; 
 localStorage.setItem（'counter'，JSON.stringify（tick））; 
 console.log（'这是我的勾选'+勾号）; 
} 
} 
 
 @NgModule（{
进口：[BrowserModule]，
声明：[App]，
 bootstrap：[App ] 
}）
导出类AppModule {} 
 
 
类栏{
 baz：number = 11; 
} 
 
 class Foo {
 bar：Bar = new Bar（）
} 
  

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

I know that the localStorage ES6 thing can store strings. Do I have to write my own deserialization of complex class objects? Like (I think) suggested here: Angular 2 map http response to instance of class

解决方案

Your Problem

I am not understanding exactly what you are trying to do with the counter. So I went ahead and made you a real simple example of a way to manipulate your counter and save it to the localStorage.

In my example I show you how to save the data as JSON and how to handle it when you retrieve it.

My Solutions

I made a punker for you to play with till you get it done. You have to look at the Application tab in the dev tools when you inspect element. Then go to Storage. Then click on the run.plnkr.co storage link to see the counter saved to the localhost.

Link to Live Code

Please see the plunker here.

Make sure to look at the file /src/app.ts

Eyes on Example

Code Example

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

这篇关于如何在浏览器的存储中存储对象（类类型）并检索它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！