Получить и использовать предыдущее состояние из локального хранилища

Question

Я строю 3 разных режима / переключатели с реагирующим дизайном муравья, и я хочу получить предыдущее состояние из локального хранилища и присвоить его моему значению.

Это работает только тогда, когда я жестко кодирую значение, должен быть более чистый способ добиться этого.

  class Settings extends React.Component {
    state = {
      mode: 'Something Mode 1',
    }


  componentDidMount() {
      chrome.storage.local.get('AllModes', (result) => {
        this.setState({ mode: result.AllModes})
      })
    }



      handleMode () {
          let currentMode = localStorage.getItem(['AllModes']);
        console.log(currentMode)
        this.setState(( currentMode ) => {
          return {
              mode: currentMode.mode
          }
      })
    }

  <RadioGroup onChange={this.onChange}
              className="radio__group"
              defaultValue={this.handleMode}>
  </RadioGroup>
  }

Answer 1

Есть несколько способов сделать это, но я опишу простой.Вы можете сохранить состояние компонента в localStorage как строку в кодировке JSON и восстановить его при воссоздании компонента.

Мы можем определить наши методы сохранения и загрузки:

function getStoredComponentState(initialState) {
    const storedState = localStorage.getItem(checkedStorageKey);
    return storedState ? JSON.parse(storedState) : initialState;
}

function storeComponentState(state) {
    localStorage.setItem(checkedStorageKey, JSON.stringify(state))
}

МыИнициализируйте наше состояние из того, что было сохранено, предоставив значение по умолчанию в случае, если не сохранено предыдущее состояние:

constructor() {
    super();
    this.state = getStoredComponentState({
      checked: false,
    })
  }

Мы сохраняем любые изменения, внесенные в хранилище, когда они происходят:

setState(state) {
    super.setState(state);
    storeComponentState(state);    
  }

Ионо работает!Вы можете внести изменения, обновить страницу и увидеть, что предыдущее состояние восстановлено. JSFiddle