存储下拉菜单选择并从locals加载它反应中（多个下拉菜单）

Question

我想将下拉列表的选定值存储在React with local Storage中，并且当刷新页面时，必须保留该值。我面临的困难是，下拉列表的数量未知，这取决于映射对象的值是API的结果

<Col sm={2} xl={5}>
<Card className='AV'>
<Card.Body>
<Card.Text className='content-title ' as='h5'>
Select the answers for each question you had asked to your client
</Card.Text>

{ Object.entries(this.state.liste).map( ([ke,values]) => { let question=ke
   return (                            
   <div key={ke.id}>
   <div  name = "question"  >
   <h6 className="left">{ke}</h6>
   <div >
         
   < select className="right"  key={values} name = "answer to each question"  onChange={(event) => 
   this.handleChangeaa(question,event)}>
   <option value={this.state.selected} selected disabled hidden>  Not answered </option> 

   {Object.values(values).map(key=>{ console.log('the key of select objects:',key.id)
    return (<option  key={key.id} id={key}>{key}</option>) })}
    </select>
     </div>            
          
     </div>
     </div>) }) }
    <button className='button' onClick={this.createdecision}>   Create a new decision maker </button
     </Card.Body>
     </Card>
     </Col>