CODEWITHSUNDEEP
reactjslocal-storagereact-nativereact-router
Anandhakumar R
Anandhakumar R

Reputation: 609

React local storage initialization only once

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.

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.

Index.html file is here,

<html>
  <head>
    <script src="./js/jquery.min.js"></script>
    <script src="http://localhost:35729/livereload.js"></script>
    <style type="text/css">
    </style>
  </head>
  <body>
    <div id="main"></div>
    <script src="./build/bundle.js"></script>

    <script type="text/javascript">

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

      </script>
  </body>
</html>

Here my component file

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 > 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(
              <div  key={i}>
                  <p>{el.ITEM_PRICE}</p>
              </div>
            )
        }, this);

    return (
                 <div>{cardmain}<input type="text" id="itemprice" /><div onClick={this.handleSubmit}>Click Here</div></div>                 


    );
  }
});

module.exports = Index;

Please help to sort this out.

Thanks in Advance.

Upvotes: 1

Views: 2410

Answers (1)

Aaron Franco
Aaron Franco

Reputation: 1580

Don't set localStorage in index.html.

<html>
<head>
<script src="./js/jquery.min.js"></script>
<script src="http://localhost:35729/livereload.js"></script>
<style type="text/css">
</style>
</head>
<body>
  <div id="main"></div>
  <script src="./build/bundle.js"></script>
 </body>
</html>

Let your component update localStorage as you go.

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 > 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));
        this.setState({ data: response });        

    },    
    componentDidMount: function () {
      var response = JSON.parse(localStorage.getItem("cus_data"));
      if(!response){
           response = { "PRICE_DETAILS":[], "CUSTOMER_DETAILS":[] };
      }
      this.setState({ data: response });
  },
  render: function() {


       var m_details = this.state.data.PRICE_DETAILS;

       var cardmain = m_details.map(function(el,i) {
      return(
              <div  key={i}>
                  <p>{el.ITEM_PRICE}</p>
              </div>
            )
        }, this);

    return (
                 <div>{cardmain}<input type="text" id="itemprice" /><div onClick={this.handleSubmit}>Click Here</div></div>                 


    );
  }
});

module.exports = Index;

Upvotes: 1

Related Questions