Javascript 如何限制本地存储的最大项目数？

我正在用Angular中的github api构建github搜索应用程序。我需要限制本地存储可以容纳的元素数量。若“限制存储元素数”大于5，则“添加到收藏夹”按钮应不起作用，否则也会消失。我是用这个

[ngStyle]=“{'display'：display.length>5&&'none'}”

完成的，但这并不是我想要的。代码如下：

html:

  <input type="text" [(ngModel)]="profile" (ngModelChange)="detectChange($event)" (keyup)="findProfile()" class="input">

  <ng-template [ngIf]="profile !== '' && user">
    <div class="profileContainer">
      <div class="leftDetails">
        <img class="userAvatar" [src]="user.avatar_url" alt="User Avatar">
        <div>
          <button class="button" [routerLink]="['', user.login.toLowerCase(), user.id ]">View
            Profile</button>
          <button class="button" [ngStyle]="{'display': display.length > 5 && 'none' }" (click)="addLocal()">Add to
            Favorite</button>
        </div>
      </div>

      <div class="rightDetails">
        <p><span>Username: </span> {{user.login}}</p>
        <p><span>Location:</span> {{user.location}}</p>
        <p><span>E-mail:</span> {{user.email}}</p>
        <p><span>Blog Link:</span> {{user.blog}}</p>
        <p><span>Member Since:</span> {{user.created_at}}</p>
      </div>

    </div>
  </ng-template>

  <div *ngIf="closeDiv">
    <div class="profileContainer" *ngFor="let item of display">
      <div class="leftDetails">
        <img class="userAvatar" [src]="item.avatar_url" alt="User Avatar">
        <div>
          <button class="button" [routerLink]="['', item.login.toLowerCase(), item.id ]">View Profile</button><br>
          <button class="button" (click)="removeLocal(item.id,item.storageKey)">Remove Favorite</button>
        </div>
      </div>

      <div class="rightDetails">
        <p><span>Username:</span> {{item.login}}</p>
        <p><span>Location:</span> {{item.location}}</p>
        <p><span>E-Mail:</span> {{item.email}}</p>
        <p><span>Blog Link:</span> {{item.blog}}</p>
        <p><span>Member Since:</span> {{item.created_at}}</p>
      </div>
    </div>
  </div>
</div>

<button (click)="consoleLog()">CONSOLEEE</button>

<router-outlet></router-outlet>

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';
import { ArrayType } from '@angular/compiler';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
  user: any;
  profile: any;
  display: any;
  randomNumber: number;
  randomString: string;
  closeDiv: boolean = true;
  isClicked: boolean = true;

  constructor(private userData: HttpService) {}

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

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

  public addLocal() {
    this.randomNumber = Math.floor(Math.random() * 10000);
    this.randomString = this.randomNumber.toString();
    this.user.storageKey = this.randomString;
    localStorage.setItem(this.user.storageKey, JSON.stringify(this.user));
    this.display = Object.values(localStorage).map((val: any) =>
      JSON.parse(val)
    );
  }

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

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

看法
轮廓
加上
最喜欢的
用户名：{{user.login}

位置：{{user.Location}

电子邮件：{{user.email}

博客链接：{{user.Blog}

成员自：{{user.created_at}

视图配置文件

删除收藏夹
用户名：{{item.login}

位置：{{item.Location}

电子邮件：{{item.email}

博客链接：{{item.Blog}

成员自：{{item.created_at}}

安慰

ts:

  <input type="text" [(ngModel)]="profile" (ngModelChange)="detectChange($event)" (keyup)="findProfile()" class="input">

  <ng-template [ngIf]="profile !== '' && user">
    <div class="profileContainer">
      <div class="leftDetails">
        <img class="userAvatar" [src]="user.avatar_url" alt="User Avatar">
        <div>
          <button class="button" [routerLink]="['', user.login.toLowerCase(), user.id ]">View
            Profile</button>
          <button class="button" [ngStyle]="{'display': display.length > 5 && 'none' }" (click)="addLocal()">Add to
            Favorite</button>
        </div>
      </div>

      <div class="rightDetails">
        <p><span>Username: </span> {{user.login}}</p>
        <p><span>Location:</span> {{user.location}}</p>
        <p><span>E-mail:</span> {{user.email}}</p>
        <p><span>Blog Link:</span> {{user.blog}}</p>
        <p><span>Member Since:</span> {{user.created_at}}</p>
      </div>

    </div>
  </ng-template>

  <div *ngIf="closeDiv">
    <div class="profileContainer" *ngFor="let item of display">
      <div class="leftDetails">
        <img class="userAvatar" [src]="item.avatar_url" alt="User Avatar">
        <div>
          <button class="button" [routerLink]="['', item.login.toLowerCase(), item.id ]">View Profile</button><br>
          <button class="button" (click)="removeLocal(item.id,item.storageKey)">Remove Favorite</button>
        </div>
      </div>

      <div class="rightDetails">
        <p><span>Username:</span> {{item.login}}</p>
        <p><span>Location:</span> {{item.location}}</p>
        <p><span>E-Mail:</span> {{item.email}}</p>
        <p><span>Blog Link:</span> {{item.blog}}</p>
        <p><span>Member Since:</span> {{item.created_at}}</p>
      </div>
    </div>
  </div>
</div>

<button (click)="consoleLog()">CONSOLEEE</button>

<router-outlet></router-outlet>

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';
import { ArrayType } from '@angular/compiler';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
  user: any;
  profile: any;
  display: any;
  randomNumber: number;
  randomString: string;
  closeDiv: boolean = true;
  isClicked: boolean = true;

  constructor(private userData: HttpService) {}

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

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

  public addLocal() {
    this.randomNumber = Math.floor(Math.random() * 10000);
    this.randomString = this.randomNumber.toString();
    this.user.storageKey = this.randomString;
    localStorage.setItem(this.user.storageKey, JSON.stringify(this.user));
    this.display = Object.values(localStorage).map((val: any) =>
      JSON.parse(val)
    );
  }

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

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

从“../http.service”导入{HttpService}；
从“./profile/profile.component”导入{ProfileComponent}；
从“@angular/common”导入{JsonPipe}；
从“rxjs”导入{bindCallback}；
从'@angular/forms'导入{FormArray}；
从'@angular/compiler'导入{ArrayType}；
@组成部分({
选择器：“应用程序主页”，
templateUrl:“./home.component.html”，
样式URL:['./home.component.scss']，
})
导出类HomeComponent实现OnInit{
用户：任何；
简介：任何；
显示：任何；
随机数：随机数；
随机字符串：字符串；
closeDiv:boolean=true；
isClicked:boolean=true；
构造函数（私有用户数据：HttpService）{}
恩戈尼尼特（）{
this.display=Object.values（localStorage）.map（（val:any）=>
JSON.parse（val）
);
console.log（this.display）；
}
公共findProfile（）{
this.userData.updateProfile（this.profile）；
this.userData.getUser（）.subscribe（（结果）=>{
this.user=结果；
});
}
公共addLocal（）{
this.randomNumber=Math.floor（Math.random（）*10000）；
this.randomString=this.randomNumber.toString（）；
this.user.storageKey=this.randomString；
setItem（this.user.storageKey，JSON.stringify（this.user））；
this.display=Object.values（localStorage）.map（（val:any）=>
JSON.parse（val）
);
}
public removeLocal（id:any，key:string）{
for（设i=0；i0？（this.closeDiv=false）：（this.closeDiv=true）；
}
}

我不想在本地存储上使用

map

，只需检查本地存储的长度并在HTML/模板端添加检查即可

this.display = Object.values(localStorage).length;
<button class="button" *ngIf="display.length < 5">Add to           
Favorite</button>

this.display=Object.values（localStorage）.length；
加上
最喜欢的

我不想在本地存储上使用

map

，只需检查本地存储的长度并在HTML/模板端添加检查即可

this.display = Object.values(localStorage).length;
<button class="button" *ngIf="display.length < 5">Add to           
Favorite</button>

this.display=Object.values（localStorage）.length；
加上
最喜欢的

@Pallavirichariya我添加了html代码。@Pallavirichariya我添加了html代码。我认为显示在html中也用于显示数据，因此地图是used@pallavirichhariya是的，你说得对。我为长度分配了另一个变量。@Pallavirichariya可能是因为我不知道该用例：）我认为在html中显示也用于显示数据，因此地图是used@pallavirichhariya是的，你说得对。我为长度分配了另一个变量。@Pallavirichariya可能是因为我不知道该用例：）