将 json 文件推入 localStorage 数组

Question

我的任务是在 angular 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);
});

将 json 文件推入 localStorage 数组

Pushing json file into a localStorage array

json

typescript

angular2-observables

angular