Javascript 我应该如何实现将状态保存到本地存储？

代码：

var React = require('react');
var Recipe = require('./Recipe.jsx');
var AddRecipe = require('./AddRecipe.jsx');
var EditRecipe = require('./EditRecipe.jsx');

var RecipeBox = React.createClass({


    getInitialState: function () {
        return {
           recipesArray: [],
           adding: false,
           editing: false,
           currentIndex: 0
        };
    },

    handleClick: function () {
        this.setState({
            adding: true
        }); 
    },
    handleEditClick: function(index) {
        this.setState({
            editing: true,
            currentIndex: index
        }); 
    },
    handleDeleteClick: function(index) {
        var newRecipesArray = this.state.recipesArray;
        newRecipesArray.splice(index-1,1);
        this.setState({
            recipesArray: newRecipesArray
        });
    },
    handleClose: function() {
        this.setState({
            adding: false,
            editing: false
        });
    },
    handleAdd: function(newRecipe) {
        this.setState({
            recipesArray: this.state.recipesArray.concat(newRecipe)
        });
    },
    handleEdit: function(newRecipe, index) {
        var newRecipesArray = this.state.recipesArray;
        newRecipesArray[index-1] = newRecipe;
        this.setState({
            recipesArray: newRecipesArray
        });

    },

    render: function() {
        var i = 0;
        var that = this;

        var recipes = this.state.recipesArray.map(function(item) {
            i++
            return (
                <div key={"div"+i} className="table">
                    <Recipe key={i} name={item.name} ingredients={item.ingredients} />
                    <button key ={"edit"+i} onClick={() => { that.handleEditClick(i)}} className="btn edit btn-primary">Edit</button>
                    <button  key ={"delete"+i} onClick={() => { that.handleDeleteClick(i)}} className="btn delete btn-danger">Delete</button>
                </div>
            );
        });

        return (
            <div>
                <h1>React.js Recipe Box</h1>
                <button className="btn btn-primary" onClick={this.handleClick}>Add Recipe</button>
                <table>
                    <tbody>
                        <tr>
                            <th>RECIPES</th>
                        </tr>
                    </tbody>
                </table>
                {recipes}
                { this.state.adding ? <AddRecipe handleClose={this.handleClose}  handleAdd={this.handleAdd} /> : null }
                { this.state.editing ? <EditRecipe currentIndex = {this.state.currentIndex} handleClose={this.handleClose}  handleEdit={this.handleEdit}/> : null }
            </div>
        );
    },
});

module.exports = RecipeBox;

var React=require（'React'）；
var Recipe=require（'./Recipe.jsx'）；
var AddRecipe=require（'./AddRecipe.jsx'）；
var EditRecipe=require（'./EditRecipe.jsx'）；
var RecipeBox=React.createClass({
getInitialState:函数（）{
返回{
阵列：[]，
加：错，
编辑：错，
当前索引：0
};
},
handleClick:函数（）{
这是我的国家({
加：对
}); 
},
HandleEdit单击：函数（索引）{
这是我的国家({
编辑:对,，
当前索引：索引
}); 
},
handleDeleteClick:函数（索引）{
var newRecipesArray=this.state.recipesArray；
NewRecipes阵列拼接（索引-1,1）；
这是我的国家({
recipesArray:newRecipesArray
});
},
handleClose:function（）{
这是我的国家({
加：错，
编辑：假
});
},
handleAdd：函数（新配方）{
这是我的国家({
recipesArray:this.state.recipesArray.concat（newRecipe）
});
},
handleEdit:函数（新配方、索引）{
var newRecipesArray=this.state.recipesArray；
NewRecipes数组[index-1]=newRecipe；
这是我的国家({
recipesArray:newRecipesArray
});
},
render:function（）{
var i=0；
var=这个；
var recipes=this.state.recipesArray.map（函数（项）{
我++
返回(
{that.handleEditClick（i）}className=“btn edit btn primary”>编辑
{that.handleDeleteClick（i）}className=“btn delete btn danger”>删除
);
});
返回(
React.js配方盒
添加配方
食谱
{配方}
{this.state.adding？：null}
{this.state.editing？：null}
);
},
});
module.exports=RecipeBox；

---

问题：

var React = require('react');
var Recipe = require('./Recipe.jsx');
var AddRecipe = require('./AddRecipe.jsx');
var EditRecipe = require('./EditRecipe.jsx');

var RecipeBox = React.createClass({


    getInitialState: function () {
        return {
           recipesArray: [],
           adding: false,
           editing: false,
           currentIndex: 0
        };
    },

    handleClick: function () {
        this.setState({
            adding: true
        }); 
    },
    handleEditClick: function(index) {
        this.setState({
            editing: true,
            currentIndex: index
        }); 
    },
    handleDeleteClick: function(index) {
        var newRecipesArray = this.state.recipesArray;
        newRecipesArray.splice(index-1,1);
        this.setState({
            recipesArray: newRecipesArray
        });
    },
    handleClose: function() {
        this.setState({
            adding: false,
            editing: false
        });
    },
    handleAdd: function(newRecipe) {
        this.setState({
            recipesArray: this.state.recipesArray.concat(newRecipe)
        });
    },
    handleEdit: function(newRecipe, index) {
        var newRecipesArray = this.state.recipesArray;
        newRecipesArray[index-1] = newRecipe;
        this.setState({
            recipesArray: newRecipesArray
        });

    },

    render: function() {
        var i = 0;
        var that = this;

        var recipes = this.state.recipesArray.map(function(item) {
            i++
            return (
                <div key={"div"+i} className="table">
                    <Recipe key={i} name={item.name} ingredients={item.ingredients} />
                    <button key ={"edit"+i} onClick={() => { that.handleEditClick(i)}} className="btn edit btn-primary">Edit</button>
                    <button  key ={"delete"+i} onClick={() => { that.handleDeleteClick(i)}} className="btn delete btn-danger">Delete</button>
                </div>
            );
        });

        return (
            <div>
                <h1>React.js Recipe Box</h1>
                <button className="btn btn-primary" onClick={this.handleClick}>Add Recipe</button>
                <table>
                    <tbody>
                        <tr>
                            <th>RECIPES</th>
                        </tr>
                    </tbody>
                </table>
                {recipes}
                { this.state.adding ? <AddRecipe handleClose={this.handleClose}  handleAdd={this.handleAdd} /> : null }
                { this.state.editing ? <EditRecipe currentIndex = {this.state.currentIndex} handleClose={this.handleClose}  handleEdit={this.handleEdit}/> : null }
            </div>
        );
    },
});

module.exports = RecipeBox;

我应该如何实现将状态保存到本地存储？ 最优雅的实现是什么

---

目前正在学习React并希望编写干净优雅的代码。

我想看一看使本地存储更容易的插件（不是特定于浏览器的）。例如：

---

上面的页面包含了开始时所需的所有信息。如果这个不行，我会继续搜索。外面有很多。也可能有使用React的更新版本。当我学习/做Angular时，jQuery插件为我工作。

每当启动状态更新时，它都会触发

componentDidUpdate的生命周期方法。可以挂接到该方法中以保存组件的状态

componentDidUpdate() {
  window.localStorage.setItem('state', JSON.stringify(this.state));
}

根据您的用例，您应该能够将其加载到
componentDidMount
上

componentDidMount() {
  // there is a chance the item does not exist
  // or the json fails to parse
  try {
    const state = window.localStorage.getItem('state');
    this.setState({ ...JSON.parse(state) });
  } catch (e) {}
}

我要警告你，你可能想要一个更像“成熟”解决方案的解决方案。这一个在几个方面都很脆弱。
为什么要投否决票？如有必要，我愿意编辑我的问题。请解释一下，他们投了反对票，因为你真的没有说你想说什么。您输入了代码，但没有输入您尝试的本地存储或任何问题。一般来说，你会被否决。@webdad3是有意义的。虽然这段代码可能会回答这个问题，但提供关于如何和/或为什么解决这个问题的额外上下文将提高答案的长期价值。