@ReactDev

Как сохранить select option в localstorage?

Как сохранить select option в localstorage?
Мне нужно чтобы выбранный вариант select сохранялся в localstorage и после перезагрузки значение было таким же
<select>
            {this.state.currencies.map((currencies) =>(
              
                <option>
                    <div className={s.option} >{currencies.symbol} {currencies.label}
                    </div>                  
                </option>
                )
              ) 
            }
                </select>

Я уже отслеживаю значение выбранного значения и сохраняю в localstorage и на основе этого значения выполняю нужные мне действия(изменяется валюта на сайте), но значения select после перезагрузки страницы становятся по умолчанию "$ USD".

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

  

class Currency extends Component {
  constructor(props){
    super(props);
    this.state = {
      currencies: ["$ USD", "€ EURO"],
    }
  }
    
    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))
  }
  • Вопрос задан
  • 126 просмотров
Решения вопроса 1
black1277
@black1277
Вольный стрелок
Чтобы при загрузке страницы был выбран сохраненный вариант из списка option, нужно чтобы у нужного варианта был атрибут selected. Пример:
<select name="nm" id="nam">
  <option value="QBC">QBC</option>
  <option value="QEF">QEF</option>
  <option value="GHI" selected>GHI</option> <!-- этот вариант будет выбран-->
  <option value="KLM">KLM</option>
</select>

значит вам нужно в каждом option выводить переменную вместо selected, которая будет либо пустая, либо равна selected (если сохраненное состояние равно выводимому option).
Добавил рабочий пример, где всё работает (проверял)
Пример на функциональных компонентах

import React, { useState, useEffect } from 'react'

const LocalStorage = () => {
  const date = [
    { symbol: 'RU', label: 'рубль' },
    { symbol: 'USD', label: 'доллар' },
    { symbol: 'EUR', label: 'евро' }
  ]

  const [curr, setCurrencies] = useState(date)
  const [currentSymbol, setCurrentSymbol] = useState("EUR") // опция выбранная по умолчанию (если нет данных в localstorage)

// срабатывает один раз при загрузке компонента
  useEffect(() => {
    if(localStorage.getItem('symbol')) {
      const item = localStorage.getItem('symbol')
      setCurrentSymbol(item)
    }
  }, [])

// обработчик - срабатывает при выборе опции списка
  const selectHandler = (e) => {
    localStorage.setItem('symbol', e.target.value)
    setCurrentSymbol(e.target.value)
  }

  return (
    <div>
      <select onChange={selectHandler} value={currentSymbol}>
        {
          curr.map(currencies => (
            <option key={currencies.symbol} value={currencies.symbol}>
              {currencies.symbol} {currencies.label}
            </option>
          )
          )
        }
      </select>
    </div>
  )
}

export default LocalStorage


на классовых

import React, { Component } from 'react'


class ClassLocal extends Component {
  constructor(props){
    super(props);
    this.state = {
      curr: [
        { symbol: "RU", label: "рубль" },
        { symbol: "USD", label: "доллар" },
        { symbol: "EUR", label: "евро" }
      ],
      currentSymbol: "EUR"
    }
  }


  componentDidMount() {
    if(localStorage.getItem('symbol')) {
      const item = localStorage.getItem('symbol');
      this.setState({currentSymbol: item})
    }
  }


  selectHandler = (e) => {
    localStorage.setItem('symbol', e.target.value)
    this.setState({currentSymbol: e.target.value})
  }

  render() {
    return (
      <div>
        <select onChange={this.selectHandler} value={this.state.currentSymbol}>
          {
            this.state.curr.map(currencies => (
                <option key={currencies.symbol} value={currencies.symbol}>
                  {currencies.symbol} {currencies.label}
                </option>
              )
            )
          }
        </select>
      </div>
    )
  }
}

export default ClassLocal

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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