如何避免将location对象存入localStorage时出现重复？React前端开发问题

问题根源 #

你当前的代码逻辑没有做重复校验，每次点击都会无条件将当前location对象和历史记录合并写入localStorage，所以多次点击同一个地址会出现重复条目。

修复方案 #

核心逻辑调整为：先读取本地存储的历史记录，判定当前地址是否已经存在，再决定是否新增。如果需要符合「最近点击的地址排在最前面」的交互习惯，还可以对已存在的记录做顺序调整。
首先你需要选定一个可以唯一区分地址的字段，比如示例中用location.description作为去重依据，你也可以替换为接口返回的地址唯一ID等更精准的字段。

修改后代码（KeywordLocation.js） #

const Component = ({ location }) => {
  const redirectToMap = async () => {
    // 读取本地历史记录
    const historyLocations = JSON.parse(localStorage.getItem("recent_location_searched") || "[]");
    // 判定当前地址是否已存在
    const isDuplicate = historyLocations.some(item => item.description === location.description);

    let newHistory;
    if (isDuplicate) {
      // 可选：已存在的记录移到列表头部，不需要调整顺序可直接return跳过写入
      newHistory = [
        location,
        ...historyLocations.filter(item => item.description !== location.description)
      ];
    } else {
      // 不存在则新增到列表头部
      newHistory = [location, ...historyLocations];
    }

    // 可选：限制最多存储10条历史记录，可自行调整数量
    if (newHistory.length > 10) {
      newHistory = newHistory.slice(0, 10);
    }

    localStorage.setItem("recent_location_searched", JSON.stringify(newHistory));
  };

  return (
    <div onClick={() => redirectToMap()} className="pt-md cursor-pointer">
      <p>{location.structured_formatting.main_text}</p>
      <p className="text-xs border-b border-black pb-md ">
        {location.description}
      </p>
    </div>
  );
};

注意事项 #

• 去重字段可根据实际业务调整，优先用接口返回的唯一ID比文本字段更稳妥
• 不需要调整历史记录顺序的话，检测到重复直接return即可，无需再执行写入操作

内容的提问来源于stack exchange，提问作者Chandler Bing