Utilizzo di LocalStorage con React?

Question

Da quello che sto sperimentando finora, non sembra che gli aggiornamenti di ReactJS con lo stato di localStorage. Il mio codice qui sotto

var Frr = React.createClass({ 
getInitialState: function(){ 
return { lights: localStorage.getItem('state')} 
}, 

switchoff: function(){ 
this.setState({lights: localStorage.setItem('state', 'off')}); 
}, 

switchon:function(){ 
this.setState({lights: localStorage.setItem('state', 'on')}); 
}, 

render:function(){ 
if (this.state.lights === 'on'){ return (
<div> 
<p>The lights are ON</p> 
<input type="submit" value="Switch" onClick={this.switchoff}/> 
</div> 
);} 

if ((this.state.lights === 'off')|| (!this.state.lights)){ return (
<div> 
<p>The lights are OFF</p> 
<input type="submit" value="Switch" onClick={this.switchon}/> 
</div> 
);} 


} 
}); 

Semplice applicazione. Se lo stato di localstorage è spento o vuoto, quindi visualizza la vista con il pulsante ON. Se lo spazio locale è attivo, esegui il rendering della vista con il pulsante OFF.

Voglio essere in grado di impostare questo rendering in base allo stato di localStorage. Ho provato a fare la stessa cosa usando i booleani di base e funziona come previsto. Tuttavia, quando si utilizza localStorage, qualcosa non sembra funzionare.

Non sarei sorpreso se la mia logica fosse semplicemente spenta.

MODIFICA: per spiegare, il pulsante e la vista non funzionano come dovrebbero. Quando le luci sono spente e non c'è nulla in Storage, il pulsante aggiunge ON a localStorage, ma non modifica la vista. Se aggiorno la pagina, la pagina viene visualizzata su ON e quando faccio clic su di essa il pulsante funziona disattivandolo. Ma funziona solo una volta, il che mi porta a credere che ci possa essere un problema con l'interruttore OFF.

Answer 1

La funzione di memorizzazione locale .setItem() restituisce undefined. È necessario eseguire l'aggiornamento di archiviazione locale e quindi restituire il nuovo oggetto Stato:

switchoff: function(){ 
    localStorage.setItem('state', 'off'); 
    this.setState({lights: 'off'}); 
}, 

Answer 2

Qui è solo un altro esempio:

import React from 'react' 
class App extends React.Component { 
    constructor(props) { 
    super(props); 
    var storedClicks = 0; 

    if (localStorage.getItem('clicks')) { 
     storedClicks = parseInt(localStorage.getItem('clicks')); 
    } 

    this.state = { 
     clicks: storedClicks, 
    }; 
    this.click = this.click.bind(this); 
    } 

    click() { 
    var newclick = this.state.clicks + 1; 
    this.setState({clicks: newclick}); 
    // Set it 
    localStorage.setItem('clicks', newclick); 
    } 

    render() { 
    return (
     <div> 
     <h2>Click the button a few times and refresh page</h2> 
     <button onClick={this.click}>Click me</button> Counter {this.state.clicks} 
     </div> 
    ); 
    } 
} 
export default App;