Local storage存储新搜索结果时被覆盖，无法追加历史记录问题求助

问题根源 #

你当前的写法有3个核心错误导致数据被覆盖、逻辑异常：

• 结果页每次拿到新搜索结果直接覆盖写入localStorage，完全没有读取旧数据做合并
• 历史页错误将组件入参props当作要追加的新数据，还把数据写入逻辑放在组件渲染的顶层，每次打开历史页都会往存储里塞无效的垃圾数据
• 没有做localStorage空值兜底，首次使用时读取不到data会拿到null，调用push方法直接报错

修改方案 #

1. 修改结果页存储逻辑 #

把结果页中原来直接存储的代码替换成先读旧数据、再合并新数据的逻辑：

export default function ResultsPage(props) {
    console.log(props)
    // 拿到本次搜索的新结果
    const newSearchResult = props.history.location.state;

    // --- 修正后的存储逻辑开始 ---
    // 先读取之前存储的历史数据，没有的话初始化为空数组
    const oldHistory = JSON.parse(localStorage.getItem('data')) || []
    // 合并新旧数据，需要去重的话可以在这里加过滤逻辑
    const updatedHistory = [...oldHistory, ...newSearchResult]
    // 把合并后的完整历史存回localStorage
    localStorage.setItem('data', JSON.stringify(updatedHistory))
    // --- 修正后的存储逻辑结束 ---

    // 渲染本次搜索结果的逻辑不用改
    const hitList = newSearchResult.map((data, idx) => {
        return (
            <ul key={idx}>
                <div>
                  <li> 作者: {data.author}</li> 
                  <li>文章标题: {data.story_title}</li> 
                  <li>评论: {data.comment_text}</li>  
                  <li>创建时间: {data.created_at}</li>  
                  <li></li>  
                </div>
                <hr/>
            </ul>
        )
    })

    return (
        <div>
            <Link to='/'><h1>搜索</h1></Link> 
            <Link to='/history'><h1>你的搜索历史</h1></Link>
            <h3>{hitList}</h3>
        </div>
    )
}

2. 修改历史页逻辑 #

历史页只负责读取存储数据渲染即可，不要在这里做写入操作：

export default function SearchHistoryPage(props) {
    // 读取存储的完整历史，空值兜底为数组
    const storedHistory = JSON.parse(localStorage.getItem('data')) || [];

    const searchHistory = storedHistory.map((data, idx) => {
        return (
            <ul key={idx}>
              <li> 作者: {data.author}</li> 
              <li>文章标题: {data.story_title}</li> 
              <li>评论: {data.comment_text}</li>  
              <li>创建时间: {data.created_at}</li>  
            </ul>
        )
    })

    return (
        <div>
            <h2>{searchHistory}</h2>
        </div>
    )
}

额外优化建议 #

如果需要避免同一条搜索结果重复存入历史，可以在合并数据时，根据每条结果的唯一id做去重过滤即可。

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