如何在不覆盖存储在本地存储中的先前数据的情况下将新的json数据添加到本地存储

时间：2019-07-13 10:58:38

标签： typescript angular-material angular-local-storage

Project screenshot 附上了我的项目的屏幕截图，显示了当前的外观 我的问题陈述是：“您需要开发一个单页Web应用程序（最好但不一定是在AngularJS中开发）。”

应用程序应列出并搜索从下面提到的API获取的银行。应该有一个城市下拉菜单（仅在其中放置5个城市），并且有一个搜索栏。当我在搜索区域中键入内容时，应该对表进行动态过滤（客户端过滤）。搜索应跨所有字段。

以下是获取银行列表的后端API：https://vast-shore-74260.herokuapp.com/banks?city=MUMBAI

您的应用程序必须具备的基本知识：银行搜索屏幕，其中将显示银行列表，用户应能够在所有字段中通过文本搜索银行（重要：没有搜索按钮），以分页显示结果通过搜索，用户应该能够选择页面大小，将一些银行标记为收藏。查看被标记为收藏夹的银行（如果刷新或重新加载网站，收藏夹应保留状态事件）API调用应被缓存

我已经编写了代码，当前我的项目在带有客户端过滤的角度数据表中显示JSON数据，以搜索字段以及分页。甚至在垫子收藏夹图标上实现click事件，以便每当单击心脏（收藏夹）图标时，该行中的数据就会存储在本地存储中。

问题是，每当单击另一行时，存储在本地存储中的先前数据就会被新数据覆盖。我想存储以前的数据以及新的数据。

</ service component that is bankhttpservice.ts 
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpClientModule } from 
'@angular/common/http';
import { HttpErrorResponse, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs/Observable'
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';

@Injectable({
 providedIn: 'root'
})

export class BankhttpService {
   private baseUrl = "https://vast-shore-74260.herokuapp.com/banks";
   public myCity = "MUMBAI"

   constructor(private _http : HttpClient) {
       console.log('Bank http service called');
   }

   private handleError(err:HttpErrorResponse){
   console.log('Handle http error');
   console.log(err.message);
   return Observable.throw(err.message);
 }
 public getBankBranches(): any {
    let myResponse = this._http.get(this.baseUrl + '?city=' + 
      this.myCity);
    console.log(myResponse);
    return myResponse;
 }

 public getUserInfoFromLocalStorage = ()=>{
  return JSON.parse(localStorage.getItem('fav'));
 }

 public setUserInfoInLocalStorage = (data)=>{
  localStorage.setItem('fav',JSON.stringify(data))
 }
 }
  />


 <  home.component.ts
 import { Component, OnInit, Inject, ViewChild,  ElementRef} from 
 '@angular/core';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from 
 '@angular/material/dialog';
 import { MatSort, MatTableDataSource, MatPaginator, MatCheckboxModule} 
  from '@angular/material';
 import { BankhttpService } from '../bankhttp.service';

 export interface User {
    ifsc: string;
    bank_id: string;
    branch: string;
    address: string;
    city: string,
    district: string,
    state: string,
    bank_name: string
  }

  @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css'],
   styles: [
     `
       table {
       width: 100%;
       }
       th.mat-sort-header-sorted {
       color: black;
       }
     `
     ]
   })
   export class HomeComponent implements OnInit {

   selectedRowIndex : any;
   displayedColumns: string[] = ['favorite','ifsc', 'bank_id', 'branch',  
   'city', 'district', 'state', 'bank_name'];
    dataSource;
    user;

   users: User[];

   @ViewChild('button') button: ElementRef; 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;

   constructor(public bankHttpService : BankhttpService,  public dialog: 
    MatDialog) {
   console.log('Home component constructor is called');
   }

   ngOnInit() {
       console.log('Home component onIniti called');
       this.bankHttpService.getBankBranches()
        .subscribe((users: User[]) => {

       this.users = users;
       console.log(this.users)
       this.dataSource = new MatTableDataSource(users);
       console.log(this.dataSource)
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
     });
     }

      applyFilter(filterValue: string) {
       filterValue = filterValue.trim(); // Remove whitespace
       filterValue = filterValue.toLowerCase(); // Datasource defaults to 
       lowercase matches
       this.dataSource.filter = filterValue;
       }

       toggle = true;
       status = 'Enable'; 
       selectedUser : any;

       activeSkill(element:any) {
         let user1 = [];
         this.selectedUser=element;
         console.log(element)
         this.bankHttpService.setUserInfoInLocalStorage(element)
         console.log(this.bankHttpService.getUserInfoFromLocalStorage())
       }
      }
      />


      </home.component.html
       <link href="https://fonts.googleapis.com/icon? 
        family=Material+Icons" rel="stylesheet">

       <div class="example-header">
       <mat-form-field>
       <input matInput (keyup)="applyFilter($event.target.value)" 
       placeholder="Filter">
      </mat-form-field>
      </div>

     <div class="example-container">
     <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" 
       matSort>

     <!-- ifsc Column -->
     <ng-container matColumnDef="favorite">
     <th mat-header-cell *matHeaderCellDef mat-sort-header> FAV </th>
     <td mat-cell *matCellDef="let element;"> <button  
     (click)="activeSkill(element)" mat-icon-button>
     <mat-icon aria-label="Heart">favorite</mat-icon>
     </button>{{element.favorite}} </td>
     </ng-container>

    <!-- ifsc Column -->
    <ng-container matColumnDef="ifsc">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> IFSC </th>
    <td mat-cell *matCellDef="let element"> {{element.ifsc}} </td>
    </ng-container>

    <!-- bankid Column -->
    <ng-container matColumnDef="bank_id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Bank Id </th>
    <td mat-cell *matCellDef="let element"> {{element.bank_id}} </td>
    </ng-container>

    <!-- branch Column -->
    <ng-container matColumnDef="branch">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Branch </th>
    <td mat-cell *matCellDef="let element"> {{element.branch}} </td>
    </ng-container>

    <!-- address Column -->
    <!-- <ng-container matColumnDef="address">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Website </th>
    <td mat-cell *matCellDef="let element"> {{element.address}} </td>
    </ng-container>-->

    <!-- <ng-container matColumnDef="action">
    <th mat-header-cell *matHeaderCellDef> Action </th>
    <td mat-cell *matCellDef="let element">
    <mat-icon (click)="editUser(element)">edit</mat-icon>
    </td>
    </ng-container>-->

    <ng-container matColumnDef="city">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> City </th>
    <td mat-cell *matCellDef="let element"> {{element.city}} </td>
    </ng-container>

   <ng-container matColumnDef="district">
   <th mat-header-cell *matHeaderCellDef mat-sort-header> District </th>
   <td mat-cell *matCellDef="let element"> {{element.district}} </td>
   </ng-container>

   <ng-container matColumnDef="state">
   <th mat-header-cell *matHeaderCellDef mat-sort-header> State </th>
   <td mat-cell *matCellDef="let element"> {{element.state}} </td>
   </ng-container>

   <ng-container matColumnDef="bank_name">
   <th mat-header-cell *matHeaderCellDef mat-sort-header> Bank Name </th>
   <td mat-cell *matCellDef="let element"> {{element.bank_name}} </td>
   </ng-container>

   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
   <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
   </div>
   />

我希望本地存储器显示以前存储的数据以及新数据。不仅是新数据而且会覆盖旧数据

0 个答案:

没有答案
相关问题
最新问题