我應該如何實現將狀態保存到localStorage？

CODE：我應該如何實現將狀態保存到localStorage？

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的？什麼是最優雅的實現？

當前正在學習React並希望編寫乾淨優雅的代碼。

來源

2017-04-18 Coder1000

爲什麼downvote？如果有必要，我願意編輯我的問題。請解釋。 – Coder1000

他們投票因爲，你真的沒有說你嘗試過。你把你的代碼放進去，但沒有把你嘗試的本地存儲或你遇到的任何問題。一般來說，你會被拒絕投票。 – webdad3

@ webdad3有道理。 – Coder1000

每當啓動狀態更新時，將觸發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的解決方案。這一個在幾個不同的方面相當脆弱。

來源

2017-04-18 19:52:00 corvid

雖然此代碼可能回答此問題，但提供有關如何解決問題和/或爲何解決問題的其他上下文可提高答案的長期價值。 –

我會看看使本地存儲更容易（而不是瀏覽器特定）的插件。一個例子是這樣的：

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

的網頁上面已經所有你需要的信息開始。如果那個不起作用，那麼我會繼續搜索。那裏有很多東西。也有可能使用React的新版本。當我學習/做Angular時，jQuery插件爲我工作。

來源

2017-04-18 19:13:55 webdad3

我應該如何實現將狀態保存到localStorage？

回答

相關問題