Question

我正在制作食谱盒项目，我有一个食谱状态，其中包含一组食谱对象。

我使用saveToLocal函数将当前状态保存到本地存储中，如下所示：

 saveToLocal = () => {
 const local = this.state.recipe;
 localStorage.setItem("recipe", JSON.stringify(local));
}

并将其传递回添加，编辑或删除新配方的功能

 addNewRecipe = (newRecipe) => {
  this.setState({
  recipe: [...this.state.recipe,newRecipe]
  }, this.saveToLocal);
}

 editRecipe = (recipe) => {
   let selectedRecipe =this.state.recipe.find(obj=>obj.count==recipe.count)
   let editedRecipe = Object.assign(selectedRecipe,recipe);
   this.setState(Object.assign(this.state.recipe,editedRecipe),this.saveToLocal)
}

deleteRecipe = (recipe) => {
  let arr = this.state.recipe.filter(obj => obj.count !== recipe.count);
}

但是，当我刷新应用程序时，这不起作用，但是当我检查检查工具中的本地存储时，localstorage仍然有配方数据。解决这个问题的方法是什么？

谢谢

Answer 1

保存到本地存储并从本地存储获取是两种不同的方法。

localStorage.setItem(‘recipe’, JSON.stringify(this.state.recipe)

const recipe = localStorage.getItem(‘recipe’)

this.setState({...recipe})

您无需创建saveToLocal方法

Answer 2

然后，您可以使用localStorage.getItem("recipe")来检索它。在渲染功能中执行控制台日志并检查浏览器的JS控制台。

render() {
   console.log('recipe is', localStorage.getItem("recipe"))
}

在清除缓存之前，您的localStorage将保留在磁盘上。

Answer 3

如果我理解正确，你想要刷新保存的食谱。您应该使用componentDidMount并从localStorage获取配方，然后根据此设置您的状态。

store

您可以检查配方并有条件地渲染您的组件：

componentDidMount() {
    const recipe = JSON.parse( localStorage.getItem( "recipe" ) );
    this.setState( { recipe } );
}

在ReactJS中使用本地存储

3 个答案: