localStorageに状態を保存する方法を教えてください。

Question

CODE：

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; 

---

質問：私はのlocalStorageに状態を保存する実装する必要がありますどのように

？ 最も洗練された実装は何ですか？

現在、学習しています。きれいで洗練されたコードを書くことに反応して探しています。

Answer 1

状態への更新が発生するたびに、ライフサイクルメソッド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) {} 
} 

私は、あなたはおそらく、「本格的な」解決のためのよりredux with a localStorage adapterようなソリューションをしたい、あなたに警告します。これは、いくつかの異なる方法でかなり虚弱です。

Answer 2

localstorageを簡単にするプラグインを見ていきます（ブラウザ固有ではありません）。上記のページでは、始めるために必要なすべての情報を持っている

https://github.com/artberri/jquery-html5storage

：例は、これになります。それが機能しない場合、私は検索を続けます。そこにはたくさんのものがあります。リアクションを使用する新しいものもあります。 jQueryプラグインは、私がAngularを学んでいた/行っていたときに私のために働いていました。