Как я могу добавлять и удалять указанные c данные в локальном хранилище? - PullRequest
Новая
       23

Как я могу добавлять и удалять указанные c данные в локальном хранилище?

0 голосов
/ 03 августа 2020

Я недавно начал изучать Angular. Я пытаюсь создать приложение для поиска github с api github, но у меня проблемы с локальным хранилищем. У меня есть кнопка добавления в избранное, чтобы закрепить профиль на странице. Когда он закреплен, должна появиться кнопка удаления избранного вместо кнопки добавления в избранное, и это должно быть удаление профиля. Я думал, что смогу сделать это, добавив и удалив профили из локального хранилища. У меня есть пользовательская переменная, которая содержит информацию профиля как объект, когда пользователь вводит имя пользователя в строке поиска. Затем я передаю эти данные в локальное хранилище и беру все данные локального хранилища, чтобы сделать их массивом, чтобы я мог отобразить его с помощью * ngFor. Проблема в том, что когда я закрепляю профиль, я не могу навсегда удалить указанный профиль c со страницы. Я могу только временно удалить закрепленные профили. Два дня занимаюсь этой проблемой, поделился той частью, что делал до сих пор. В фиолетовой области показаны закрепленные профили.

The purple area is where pinned profiles are shown.

home.component.html:

 Имя пользователя: {{user.login}}  Местоположение: {{user.location}}  Электронная почта: {{user.email}}  Ссылка на блог: {{user.blog}}  Член с: {{user.created_at}}  Просмотреть профиль 
 Добавить в избранное   consoleLog  Имя пользователя: {{item.login}}  Местоположение: {{item.location}}  ID: {{item.id}}  Добавить кому: favouriteeee  Удалить избранное   Журнал консоли

home.component.ts: 

import { Component, OnInit, Input } from '@angular/core';
import { HttpService } from '../http.service';
import { ProfileComponent } from './profile/profile.component';
import { JsonPipe } from '@angular/common';
import { bindCallback } from 'rxjs';
import { FormArray } from '@angular/forms';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
  user: any;
  profile: any;
  display: any;
  local: any;
  randomNumber: any;
  randomString: any;
  idString: any;
  keys: any;
  closeDiv: boolean = true;
  constructor(private userData: HttpService) {}

  ngOnInit() {
    this.display = Object.values(localStorage).map((val: any) => JSON.parse(val));
    console.log('ngOnInit Works', this.display);
  }

  findProfile() {
    this.userData.updateProfile(this.profile);
    this.userData.getUser().subscribe((result) => {
      this.user = result;
    });
  }

  localStorage(id: any) {
    this.idString = JSON.stringify(id);
    localStorage.setItem(this.idString, JSON.stringify(this.user));
    this.display = Object.values(localStorage).map((val: any) => JSON.parse(val));
    console.log(Object.values(this.display));
  }

  removeLocal(id: any) {
    for (let i = 0; i < this.display.length; ++i) {
      if (this.display[i].id === id) {
        this.display.splice(i, 1);
        localStorage.removeItem(this.display[i].id);
      }
    }
  }

  detectChange(ev: any) {
    ev.length > 0 ? (this.closeDiv = false) : (this.closeDiv = true);
  }

}

1 Ответ

1 голос
/ 03 августа 2020

в component.ts 

let item = 1;
`
localStorage.setItem('itemName',Item);
const getItem = localStorage.getItem('itemName')

, поэтому константа getItem будет иметь ваше значение. вы можете сделать то же самое с массивом

...