title: React local storage initialization only once
body: <p>I was trying to do the of line application using react so I used local storage for this.But I was facing the problem with this. </p>
  
  <p>In index.html I was initializing the local storage. I updating that in my component. But when I open the file again it was reinialize again. So data is getting missed.</p>
  
  <p>Index.html file is here,</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script src="./js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost:35729/livereload.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="main"&gt;&lt;/div&gt;
      &lt;script src="./build/bundle.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
      var response = 
      {
          "CONTACT_DETAILS": 
              {
                  "ADDRESS_LINE_1": "2nd Street",
                  "ADDRESS_LINE_2": "Vadapalani",
                  "CITY": "Chennai",
                  "CONTACT_NO": "43543534534",
                  "COUNTRY": "India"
              }
          ,
          "PRICE_DETAILS": [
              {                
                  "ITEM_ID": 1,
                  "ITEM_PRICE": 8.5
              }
  
          ]
      }
  ;
        localStorage.setItem("cus_data", JSON.stringify(response));    
  
        &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here my component file</p>
  
  <pre><code>var React  = require('react');
  var routerModule = require('react-router');
  
  var Index = React.createClass({
       getInitialState:function() {
      return {
          data:{
          CONTACT_DETAILS: [],
          PRICE_DETAILS: []
        }
        };
      },
      handleSubmit: function(){
  
          var itemprice = $('#itemprice').val();        
          var item_details = this.state.data.PRICE_DETAILS;
          var maxValue = 0;
          var dd = item_details.map(function(el,i){
           if (el.ITEM_ID &gt; maxValue)
           {
                maxValue = el.ITEM_ID;   
           }
          });
          var ITEM_ID = (maxValue+1);
  
          var push_data = {ITEM_ID:ITEM_ID, ITEM_PRICE: itemprice};    
  
          item_details.push(push_data);
  
          var response = JSON.parse(localStorage.getItem("cus_data"));
  
          response.PRICE_DETAILS.push(push_data);
  
          localStorage.setItem("cus_data", JSON.stringify(response));
        var response = JSON.parse(localStorage.getItem("cus_data"));
        this.setState({ data: response });        
  
      },    
      componentWillMount: function () {
        var response = JSON.parse(localStorage.getItem("cus_data"));
        this.setState({ data: response });
    },
    render: function() {
  
  
         var m_details = this.state.data.PRICE_DETAILS;
  
         var cardmain = m_details.map(function(el,i) {
        return(
                &lt;div  key={i}&gt;
                    &lt;p&gt;{el.ITEM_PRICE}&lt;/p&gt;
                &lt;/div&gt;
              )
          }, this);
  
      return (
                   &lt;div&gt;{cardmain}&lt;input type="text" id="itemprice" /&gt;&lt;div onClick={this.handleSubmit}&gt;Click Here&lt;/div&gt;&lt;/div&gt;                 
  
  
      );
    }
  });
  
  module.exports = Index;
  </code></pre>
  
  <p>Please help to sort this out.</p>
  
  <p>Thanks in Advance.</p>