将json文件推入localStorage数组

Question

我有一个任务来制作角度8的CRUD应用程序，但是我必须以某种方式将JSON文件推送到本地存储中，然后才能添加新对象。我创建了一个联系人数组，并在其中放置了一些数据，如果有人可以帮助我将JSON数据放入该对象数组中，那么我可以从localStorage中读取所有联系人。 我已经尝试订阅联系人，这有点奏效，但不会将数据添加到localStorage。

联系人服务

import { Contact } from '../models/contact';
import { IContact } from '../models/contact';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
import { Injectable, OnInit } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ContactService {

  contacts: Array < Contact > = [{
    first_name: "Darko",
    last_name: "Lesevic",
    emails: ["darko1@test.com", "darko2@test.com"],
    phones: [123456789, 123456789, 123456789],
    photo: ''
  }];

  constructor(private http: HttpClient) {

    //this won't work

    // this.getJSON().subscribe(data => { 
    //   this.contacts = data;
    //   console.log(data); 
    //   });

  }

  getJSON(): Observable < Contact[] > {
    return this.http.get < Contact[] > ("/assets/data/contacts.json");
  }

  contacts_serialized: any;
  contacts_deserialized: any;

  localStorageObj() {
    this.contacts_serialized = JSON.stringify(this.contacts); //converts data to string

    localStorage.setItem('id', this.contacts_serialized);

    this.contacts_deserialized = JSON.parse(localStorage.getItem('id')); //converts string to data
    console.log(this.contacts_deserialized);
  }

}

在此处致电联系服务

import { ContactService } from '../services/contact.service';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Contact } from '../models/contact';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  
  constructor(private contactService: ContactService) { }

  ngOnInit() {

  this.contactService.localStorageObj();
    
  }

}

我的JSON文件

[{
		"first_name": "Afonso",
		"last_name": "Pinto",
		"emails": ["mail01@gmail.com", "mail02@gmail.com"],
		"phones": ["123-234-566", "123-234-567", "123-234-568"],
		"photo": "http://lorempixel.com/400/300/people/"
	},
	{
		"first_name": "Alexandre",
		"last_name": "Paiva",
		"emails": ["mail01@gmail.com"],
		"phones": ["123-234-560", "123-234-561"],
		"photo": null
	},
	{
		"first_name": "Oea",
		"last_name": "Romana",
		"emails": ["mail01@gmail.com", "mail02@gmail.com"],
		"phones": ["123-234-566", "123-234-567", "123-234-568"],
		"photo": "http://lorempixel.com/400/300/people/"
	},
	{
		"first_name": "Nuria",
		"last_name": "Pelayo",
		"emails": ["mail01@gmail.com", "mail02@gmail.com"],
		"phones": ["123-234-568"],
		"photo": "http://lorempixel.com/400/300/people/"
	},
	{
		"first_name": "Lisandro",
		"last_name": "Matos",
		"emails": ["mail01@gmail.com", "mail02@gmail.com"],
		"phones": ["123-234-566", "123-234-567"],
		"photo": null
	}
]

Answer 1

首先，您需要订阅，然后使用 setItem

this.contactService.getJSON().subscribe((data) => {
  localStorage.setItem('myData', JSON.stringify(data);
});