प्रतिक्रिया के साथ स्थानीय स्टोरेज का उपयोग कर?

Question

जो मैं अब तक अनुभव कर रहा हूं, वह स्थानीय स्टोरेज की स्थिति के साथ ReactJS अपडेट की तरह प्रतीत नहीं होता है। नीचे मेरा कोड।

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> 
);} 


} 
}); 

सरल आवेदन। यदि स्थानीय स्टोरेज की स्थिति बंद या खाली है, तो दृश्य को ऑन बटन के साथ प्रस्तुत करें। यदि स्थानीय स्टोरेज चालू है, तो बंद बटन के साथ दृश्य प्रस्तुत करें।

मैं स्थानीय स्टोरेज की स्थिति के आधार पर इस रेंडर को सेट करने में सक्षम होना चाहता हूं। मैंने मूल बुलियन का उपयोग करके एक ही चीज़ करने की कोशिश की है, और यह अपेक्षा के अनुसार काम करता है। हालांकि, स्थानीय स्टोरेज का उपयोग करते समय, कुछ काम करने के लिए प्रकट नहीं होता है।

यदि मेरा तर्क बस बंद है तो मुझे आश्चर्य नहीं होगा।

संपादित करें: समझाएं, बटन और दृश्य कार्य नहीं करते हैं जैसा उन्हें करना चाहिए। जब रोशनी बंद होती है और संग्रहण में कुछ भी नहीं होता है, तो बटन स्थानीय स्टोरेज पर जोड़ता है, लेकिन दृश्य को नहीं बदलता है। यदि मैं पृष्ठ को रीफ्रेश करता हूं, तो पृष्ठ चालू होता है, और जब मैं उस पर क्लिक करता हूं तो बटन इसे बंद करके काम करता है। लेकिन यह केवल एक बार काम करता है, जो मुझे विश्वास दिलाता है कि ऑफ स्विच के साथ कोई समस्या हो सकती है।

Answer 1

.setItem() स्थानीय स्टोरेज फ़ंक्शन undefined देता है।

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

Answer 2

यहाँ सिर्फ एक और उदाहरण है:: आप स्थानीय भंडारण अद्यतन प्रदर्शन और उसके बाद नए राज्य वस्तु वापस जाने के लिए की जरूरत है

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;