只对本地存储初始化反应一次答案

【问题标题】：React local storage initialization only once只对本地存储初始化反应一次
【发布时间】：2016-06-28 14:55:18
【问题描述】：

我正在尝试使用 react 进行在线应用程序，因此我为此使用了本地存储。但是我遇到了这个问题。

在 index.html 中，我正在初始化本地存储。我在我的组件中更新它。但是当我再次打开文件时，它又重新初始化了。所以数据丢失了。

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>

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

这是我的组件文件

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;

请帮忙解决一下。

提前致谢。

【问题讨论】：

标签： reactjs local-storage react-native react-router

【解决方案1】：

不要在 index.html 中设置 localStorage。

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

让您的组件随时更新 localStorage。

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;

【讨论】：

好的，但是我在 index.html 中设置了本地存储所以当我再次打开站点时它正在重置。
我必须在哪里设置本地存储
哦，我明白了。不要在 index.html 中设置它。只需让您的组件在需要时设置值即可。
只要浏览器支持，localStorage 就应该始终可用。因此，您可以随时使用 localStorage.setItem()。
我是新手，请给我完整的例子