javascript - Using local storage in ReactJS - Stack Overflow

admin管理员组

文章数量:1295956

I'm making a recipe box project, I have a recipe state that has an array of recipe objects.

I use the saveToLocal function to save the current state into local storage like this:

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

and pass it back to functions that add, edit or delete new recipe like this

 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);
}

However this does not work as I refresh the app, but when I check the local storage inside the inspect tool the localstorage still has recipe data. What is the way to fix this?

Thank you

I'm making a recipe box project, I have a recipe state that has an array of recipe objects.

I use the saveToLocal function to save the current state into local storage like this:

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

and pass it back to functions that add, edit or delete new recipe like this

 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);
}

However this does not work as I refresh the app, but when I check the local storage inside the inspect tool the localstorage still has recipe data. What is the way to fix this?

Thank you

• javascript
• reactjs
• local-storage

Share Improve this question Follow edited May 10, 2018 at 4:33 Joshua 3,18633 gold badges2626 silver badges4141 bronze badges asked May 9, 2018 at 22:35 user8840209user8840209 4

• Where do you get items again from localStorage? When you refresh your app you are losing your state. – devserkan Commented May 9, 2018 at 22:37
• What do you want to happen? – Hayden Carlson Commented May 9, 2018 at 22:38
• I want to save the recipe on refresh – user8840209 Commented May 9, 2018 at 22:45
• Save on refresh? Save from where and where to? – devserkan Commented May 9, 2018 at 22:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Saving to local storage and getting from local storage are 2 different methods.

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

const recipe = localStorage.getItem(‘recipe’)

this.setState({...recipe})

You don’t need to create a saveToLocal method

If I understand right, you want to get saved recipe on refresh. You should use ponentDidMount and get the recipe from localStorage, then set your state according to this.

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

You can check for recipe and conditionally render your ponent:

render() {
    if( !this.state.recipe.length ) {
        return <p>No recipe</p>;
        // or you can use a spinner here
    }
    return { how you handle your recipe here, map it etc. }
}

You can then use localStorage.getItem("recipe") to retrieve it. Do a console log for that inside your render function and check your browser's JS Console.

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

Your localStorage will stay on disk until you clear the cache.

本文标签： javascriptUsing local storage in ReactJSStack Overflow