如何在本地存儲中添加和刪除特定數據？

Question

I started learning Angular recently, I'm trying to make a github search app with the github api but I have some problems with local storage. 我有一個添加到收藏夾按鈕，用於將個人資料固定到頁面上。 當它被固定時，刪除收藏夾按鈕應該出現而不是添加到收藏夾按鈕，它應該被刪除配置文件。 我想我可以通過在本地存儲中添加和刪除配置文件來做到這一點。 當用戶在搜索欄中鍵入用戶名時，我有一個用戶變量，它將配置文件信息保存為 object。 然后我將這些數據傳遞到本地存儲並獲取所有本地存儲數據以使其成為一個數組，以便我可以使用 *ngFor 顯示它。 問題是當我固定個人資料時，我無法從頁面中永久刪除特定的個人資料。 我只能暫時刪除固定的個人資料。 我正在處理這個問題兩天，我已經分享了我到目前為止所做的部分。 紫色區域是顯示固定配置文件的位置。

主頁.component.html：

<input type="text" [(ngModel)]="profile" (ngModelChange)="detectChange($event)" (keyup)="findProfile()" placeholder="Enter the username..." class="input">
<div style="background-color: lightslategrey;">
  <ng-template [ngIf]="profile !== '' && user">
    <img [src]="user.avatar_url" alt="" class="userAvatar">
    <p>Username: {{user.login}}</p>
    <p>Location: {{user.location}}</p>
    <p>E-mail: {{user.email}}</p>
    <p>Blog Link: {{user.blog}}</p>
    <p>Member Since: {{user.created_at}}</p>
    <button [routerLink]="['', user.login.toLowerCase(), user.id ]" class="viewProfileButton" a>View
      Profile</button><br>
    <button (click)="localStorage()"  class="viewProfileButton">Add to Favorite</button>
  </ng-template>
</div>

<div style="background-color: rgb(106, 106, 170);" *ngFor="let item of display">
  <button (click)="consoleLog()">consoleLog</button>
  <p>Username: {{item.login}}</p>
  <p>Location: {{item.location}}</p>
  <p>ID: {{item.id}}</p>
  <button (click)="localStorage(item.id)">Add to favoriteeee</button>
  <button (click)="removeLocal(item.id)" class="viewProfileButton">Remove Favorite</button>
</div>
<button (click)="consoleLog()" class="viewProfileButton">Console Log</button>
<router-outlet></router-outlet> 

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

}

Answer 1

在組件.ts

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

所以常量 getItem 會有你的價值。 你可以對數組做同樣的事情