JavaScript遍历LocalStorage客户数组，按选中客户ID执行条件操作

Hey there! Let's walk through exactly how to implement this functionality. I'll break it down into clear, actionable steps with code examples you can drop right into your project.

核心思路 #

1. 从LocalStorage中读取已存储的客户联系数据（如果没有则初始化空数组）
2. 当用户选中客户时，先检查该customerId是否已存在于数组中
3. 调用API生成对应的CustomerContactId
4. 根据检查结果：
   • 若存在：更新该条目的CustomerContactId
   • 若不存在：新增一条包含当前customerId和新生成CustomerContactId的条目
5. 将更新后的数组重新存入LocalStorage

具体代码实现 #

// 初始化：从LocalStorage获取客户联系数据，无数据则设为空数组
let customerContacts = JSON.parse(localStorage.getItem('customerContacts')) || [];

// 处理客户选中的核心函数
async function handleCustomerSelect(selectedCustomerId) {
  try {
    // 步骤1：查找选中的customerId是否已存在
    const existingEntryIndex = customerContacts.findIndex(
      item => item.customerId === selectedCustomerId
    );

    // 步骤2：调用API生成新的CustomerContactId
    // 替换成你的实际API地址，这里假设API通过query参数接收customerId，返回数字类型的ContactId
    const apiResponse = await fetch(`/api/generate-customer-contact-id?customerId=${selectedCustomerId}`);
    if (!apiResponse.ok) {
      throw new Error(`API请求失败，状态码：${apiResponse.status}`);
    }
    const newCustomerContactId = await apiResponse.json();

    // 步骤3：执行更新或新增操作
    if (existingEntryIndex !== -1) {
      // 存在则更新ContactId
      customerContacts[existingEntryIndex].CustomerContactId = newCustomerContactId;
      console.log(`已更新客户 ${selectedCustomerId} 的联系ID`);
    } else {
      // 不存在则新增条目
      customerContacts.push({
        customerId: selectedCustomerId,
        CustomerContactId: newCustomerContactId
      });
      console.log(`已为客户 ${selectedCustomerId} 添加新的联系条目`);
    }

    // 步骤4：将更新后的数据存回LocalStorage
    localStorage.setItem('customerContacts', JSON.stringify(customerContacts));
  } catch (error) {
    console.error('处理客户选中时出错：', error);
    // 这里可以添加用户可见的错误提示，比如：
    // alert('生成客户联系ID失败，请稍后重试');
  }
}

关键细节说明 #

• 异步处理：使用async/await处理API请求，确保在获取到新的CustomerContactId后再进行数据更新，避免异步操作导致的数据不一致
• LocalStorage序列化：LocalStorage仅支持存储字符串，所以必须用JSON.parse读取、JSON.stringify写入数组数据
• 错误捕获：通过try/catch捕获API请求失败、LocalStorage操作异常等情况，提升代码健壮性
• 查找效率：使用findIndex方法快速定位目标条目，对于小规模数组（像你示例中的几条数据），这个方法足够高效；如果未来数据量很大，可以考虑将数组转换为以customerId为键的对象，进一步提升查找速度

内容的提问来源于stack exchange，提问作者Sameer Thite