无法将对象保存在localStorage中

Question

我一直试图用localStorage保存对象，但是它不起作用。我是Angular2的新手。

这是我的app.component代码

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    text = [];
    title = 'app works!';
    passText(i) {
        console.log(i);
        localStorage.setItem('text', JSON.stringify(i));
    }
}

这是我的component.html代码

<div>
    <input type="text" name="" [(ngModel)]="text.text">
    <input type="text" name="" [(ngModel)]="text.newData">
    <button class="btn btn-primary" (click)="passText(text)">submit</button>
</div>

Answer 1

您可以尝试使用此解决方案

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    text:any ={
        text:'',
        newData:''
    } ;
    title = 'app works!';
    passText(i) {
        console.log(i);
        localStorage.setItem('text', JSON.stringify(i));
    }
    getData() {
        console.log(JSON.parse(localStorage.getItem('text')));
    }
}



<div>
    <input type="text" [(ngModel)]="text.text">
    <input type="text" [(ngModel)]="text.newData">
    <button class="btn btn-primary" (click)="passText(text)">submit</button>
    <button class="btn btn-primary" (click)="getData()">Get Data from Local storag</button>
</div>

Answer 2

有一种通用的处理方法，您甚至不需要setItem，也不需要使用stringify进行序列化，因为localStorage可以序列化自身。请找到更新的片段。

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    text = [];
    title = 'app works!';
    passText(i) {
        console.log(i);
        localStorage['text'] = i;
    }
}

注意：-您无法在JavaScript中序列化事件。如果这样做，则会缺少一些实现属性，例如event.target。

Answer 3

这是一个可行的示例，

HTML文件

<div>
  <input type="text" name="" [(ngModel)]="text.text">
  <input type="text" name="" [(ngModel)]="text.newData">
  <button class="btn btn-primary" (click)="passText(text)">submit</button>
</div>
Output
{{model | json}}

打字稿文件

 model:any[]=[]; // for display output 
 text:any = {};  //changed variable array to object type.
  passText(i) {
      console.log("Data",i);
      localStorage.setItem('text', JSON.stringify(i));
  }
  getText(){
      this.model=JSON.parse(localStorage.getItem('text'));
  }

输出屏幕截图，

我希望这会有所帮助。