搜索记录持久化实现

在项目中，有时候会有搜索页面，并且在搜索后会留下搜索记录，像如下效果

我的实现思路是，渲染搜索记录列表，并且要把这个列表给保存到本地存储，这样可以实现持久化，这样下次再进入这个页面，直接从本地存储拿到这个搜索记录列表，这样就可以实现持久化，再次进入这个页面，之前的搜索记录不会丢失。

具体的实现代码如下：以react为例

import React, { Component } from 'react';
import Tou from './Tou';
import { Button, restoreMotion, SearchBar } from 'antd-mobile'
import { cdf_hotsearch,cdf_search } from '../api';
import event from '../utils/event';
import '../styles/Search.scss'
class Search extends Component {
    constructor(props){
        super(props);
        this.state={
                list:[],
                list2:[]
        }
    }
   async componentDidMount(){
   
    // if(localStorage.getItem('zuijin')==='null'){
    // }else{
        this.setState({list2:JSON.parse(localStorage.getItem('zuijin'))})

    // }
    var res=await cdf_hotsearch()
        this.setState({list:res.data.list})
    }
    fanhui(){
        this.props.history.goBack()
    }
   async huiche(value){
    // var res=await cdf_search({searchkey:value})
    // console.log(res.data.list)
    // localStorage.setItem("sousuo",JSON.stringify(res.data.list))
    // event.emit('shijian1',value)
    this.state.list2.push(value)
   console.log(this.state.list2)
   
    localStorage.setItem('zuijin',JSON.stringify(this.state.list2))
    this.props.history.push({pathname:'/index/allgood',state:{id:value}}) 
    }
    render() {
        return (
            <div className='search'>
                <header>
                <Tou xian1={true} name="搜索" >
                <div>
                         <span onClick={()=>{this.fanhui()}} className='iconfont icon-zuojiantou'></span>|
                          <span className='iconfont icon-shouye'></span>
                 </div>
                </Tou>
                <SearchBar onSearch={(value)=>{this.huiche(value)}} placeholder='搜索店铺内商品' showCancelButton={() => true} />
                </header>
                <div className='remen'>
                    <h3>最近搜索</h3>
                    <ul>
                        {
                            this.state.list2.map((item,index)=>{
                                return (
                                    <li onClick={()=>{this.huiche(item)}} key={index}>
                                        {item}
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div className='remen'>
                    <h3>热门搜索</h3>
                    <ul>
                        {
                            this.state.list.map((item,index)=>{
                                return (
                                    <li onClick={()=>{this.huiche(item)}} key={index}>
                                        {item}
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
            </div>
        );
    }
}

export default Search;