@ReactDev

Как добавить select option в localstorage?

Мне нужно чтобы выбранный вариант select сохранялся в localstorage и после перезагрузки значение было таким же. Я уже отслеживаю значение выбранного значения и сохраняю в localstorage и на основе этого значения выполняю нужные мне действия, но значения select после перезагрузки страницы становятся по умолчанию.
Я получаю данные из GraphQl, поэтому предположим, что опция содержит значения «один», «два», «три». Спасибо.

const Currency_Query = gql`
{
    currencies{
      label
      symbol
    }
  }
  `
  ;

  

class Currency extends Component {
  constructor(props){
    super(props);
    this.state = {
      currencies: [],
    }
  }
    
    componentDidMount = async () =>{
      const response = await client.query({
        query: Currency_Query
      })
      this.setState({
        currencies:response.data.currencies
      })
      
    }
    
    render() {
      return(
        
          <div className={s.select}>
             <select>
            {this.state.currencies.map((currencies) =>(
              
                <option>
                    <div className={s.option} >{currencies.symbol} {currencies.label}
                    </div>                  
                </option>
                )
              ) 
            }
                </select> 
                
                
                
        </div>
            
        );
    }
}

export default Currency;


Пример как я храню данные в localstorage

componentDidMount(){
    this.Data = JSON.parse(localStorage.getItem('data'));
    if(localStorage.getItem('data')){
      this.setState({
        selectValue: this.Data.selectValue,
        countId: this.Data.countId,
      })
    } else {
      this.setState({
      selectValue: "$ USD",
      countId: {quantityId:[]}
      })
    }
  }
  componentWillUpdate(nextProps, nextState){
    localStorage.setItem('data', JSON.stringify(nextState))
  }
  • Вопрос задан
  • 127 просмотров
Решения вопроса 1
@ReactDev Автор вопроса
Решение для функциональной и классовой компоненты тут https://qna.habr.com/q/1172342
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@7rows
Frontend Разработчик / Vue / JS / TS / CSS
У вас получение данных есть, но вы не кладете их в хранилище,

localStorage.setItem('optionSelected', JSON.stringify(значение селекта));

А взять , через getItem
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы