Не удается сохранить объект в localStorage - PullRequest
Новая
       27

Не удается сохранить объект в localStorage

0 голосов
/ 01 июля 2018

Я пытался сохранить объект с помощью 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>

Ответы [ 3 ]

0 голосов
/ 01 июля 2018

Существует универсальный способ обработки этого, вам даже не нужен 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, будут отсутствовать.

0 голосов
/ 02 июля 2018

Вот рабочий пример,

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

Вывод скриншотов,

enter image description here

enter image description here

enter image description here

Надеюсь, это полезно.

0 голосов
/ 01 июля 2018

Вы можете попробовать это решение 

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>
...