如何判断localStorage中是否已存在指定ID？

要根据localStorage中是否存在当前商品ID来控制按钮显示，你可以按照以下步骤修改代码：

1. 添加检查localStorage的方法 #

在组件类中新增一个私有方法，用于读取localStorage并判断当前商品ID是否存在：

private checkFoodIdInLocalStorage(): void {
  // 假设你在localStorage中用'cartItemIds'这个key存储已加入购物车的商品ID数组
  const storedCartIds = localStorage.getItem('cartItemIds');
  
  if (storedCartIds) {
    const cartIds = JSON.parse(storedCartIds);
    // 根据ID是否存在设置buttonShow的值，可根据实际需求调整显示逻辑
    this.buttonShow = cartIds.includes(this.food.id);
  } else {
    this.buttonShow = false;
  }
}

2. 获取商品后立即检查ID #

在路由参数订阅的回调中，获取到商品数据后调用上面的检查方法：

activatedRoute.params.subscribe((params) => {
  if(params.id) {
    this.food = foodService.getFoodById(params.id);
    this.checkFoodIdInLocalStorage(); // 获取商品后执行检查
  }
})

3. 更新购物车后同步状态 #

如果你的cartService.addToCart方法会将商品ID存入localStorage，那么在添加购物车后需要重新检查状态，确保按钮显示正确：

addToCart() {
  this.cartService.addToCart(this.food);
  this.checkFoodIdInLocalStorage(); // 添加后更新按钮状态
  this.router.navigateByUrl('/cart-page');
}

4. 模板中绑定显示逻辑 #

在组件的HTML模板里，给目标按钮添加*ngIf指令绑定buttonShow：

<!-- 示例：当buttonShow为true时显示按钮 -->
<button *ngIf="buttonShow" (click)="addToCart()">加入购物车</button>

注意事项 #

• 确保localStorage中存储的ID数组格式正确，存入时用JSON.stringify，取出时用JSON.parse
• 如果你的购物车存储逻辑是保存完整商品对象而非ID数组，需要调整检查逻辑为遍历对象数组匹配ID

内容的提问来源于stack exchange，提问作者giorgi mtchedlishvili