Angular收藏列表问题：无法在localStorage中保存favList数组

核心错误原因 #

1. localStorage存储格式错误：saveData直接存入数组，而localStorage仅支持存储字符串，导致后续JSON.parse时无法解析非字符串数据，抛出JSON错误。
2. getData无返回值：getData方法仅执行解析和打印，未返回解析结果，导致组件中console.log输出undefined。
3. favList未从localStorage初始化：服务初始化时favList默认是空数组，未读取本地存储数据，刷新页面后收藏状态丢失。
4. 收藏删除逻辑不严谨：使用pop()删除元素，仅能删除数组最后一项，若后续扩展多收藏功能会出错，当前逻辑中判断包含目标值时直接pop，也可能误删其他元素。

具体修复步骤 #

1. 修复localStorage读写方法（products.service.ts） #

修改saveData和getData，确保数据以JSON字符串格式存储和解析，同时处理空值情况：

export class ProductsService {
  // 初始化时从localStorage加载数据，无数据则为空数组
  favList: string[] = this.getData('favList') || [];

  // ...其他方法

  public saveData(key: string, value: any) {
    // 将数据转为JSON字符串后存入localStorage
    localStorage.setItem(key, JSON.stringify(value));
  }

  public getData(key: string): any {
    const data = localStorage.getItem(key);
    // 处理数据不存在的情况，避免JSON.parse(null)报错
    return data ? JSON.parse(data) : null;
  }
}

2. 修正收藏操作的删除逻辑（products.service.ts） #

替换pop()为精准删除指定元素的逻辑，确保只移除目标分类：

addFavVeg() {
  const target = 'vegetables';
  if (this.favList.includes(target)) {
    // 过滤掉目标元素，保留其他内容
    this.favList = this.favList.filter(item => item !== target);
  } else {
    // 仅支持单个收藏，先清空再添加
    this.favList = [target];
  }
  this.saveData('favList', this.favList);
  console.log(this.favList);
}

addFavFruits() {
  const target = 'fruits';
  if (this.favList.includes(target)) {
    this.favList = this.favList.filter(item => item !== target);
  } else {
    this.favList = [target];
  }
  this.saveData('favList', this.favList);
  console.log(this.favList);
}

3. 调整组件初始化逻辑（food.component.ts） #

移除ngOnInit中不必要的初始保存操作，确保组件读取的是服务中已加载的本地数据：

export class FoodComponent implements OnInit {
  foodList: Product[];
  // 直接引用服务中的favList，无需额外赋值
  favList: string[] = this.productsService.favList;

  // ...其他方法

  ngOnInit() {
    // 无需手动调用saveData和getData，服务初始化已完成加载
    this.productsService.findAllFood().subscribe(data => {
      this.foodList = data;
    });
  }
}

验证效果 #

1. 点击心形按钮，控制台会输出正确的favList数组（如['vegetables']）。
2. 刷新页面后，心形按钮状态会保持，favList会从localStorage加载，不会清空。
3. JSON错误不再出现，localStorage中存储的是标准JSON字符串格式的数组。

内容的提问来源于stack exchange，提问作者Hazem Kesba