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

Question

[ReactDev]

Как сохранить 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))
  }

Answer 1

[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

Comments

[ReactDev]

black1277 не совсем понял вас(

Вы так имеете ввиду?
let selecteds = this.props.selectValue;

<div>
          <div className={s.select}>
             <select > 
            {this.state.currencies.map((currencies) =>(
                <option selecteds >
                    <div className={s.option}>
                    {currencies.symbol} {currencies.label}
                    </div>                  
                </option>
                )
              ) 
            }
                </select> 
                
        </div>
        </div>

[ReactDev]

black1277 вы могли бы на моем коде написать? Потому что не совсем понимаю ваш ответ

[black1277]

ReactDev, добавил пример кода в ответ. На вашем коде не могу - он вызывает у меня депрессию...

[ReactDev]

black1277, у меня на классовой компоненте)) А почему мой код вызывает депрессию?))

[ReactDev]

black1277, напишите, пожалуйста, на классовой. Но не удаляйте пример для функциональной, так как это будет полезно для других

[black1277]

ReactDev, сделал и на классовых, но я уж года 2 на них не пишу... мог и подзабыть что.

[ReactDev]

black1277, Я убрал key={currencies.symbol} value={currencies.symbol}
убраал const item = localStorage.getItem('symbol');
Внедрил в свой код в App.js

componentDidMount(){
    
    this.Data = JSON.parse(localStorage.getItem('data'));
    if(localStorage.getItem('data')){
      this.setState({
        currentSymbol: this.Data.currentSymbol

      })
    } else {
      this.setState({
      currentSymbol: "$ USD"
      })
    }
   
  }
  componentWillUpdate(nextProps, nextState){
    localStorage.setItem('data', JSON.stringify(nextState))
  }

Все работает! Огромное спасибо!