I'd like to know how to save a variable's value to localStorage.
I recently learned how to do it in JavaScript, but how do I do it in ReactJs?
-
2just the same wayNurbol Alpysbayev– Nurbol Alpysbayev2018-10-22 13:59:20 +00:00Commented Oct 22, 2018 at 13:59
-
The same way ?*whatamidoingwithmylife– whatamidoingwithmylife2018-10-22 13:59:25 +00:00Commented Oct 22, 2018 at 13:59
-
@NurbolAlpysbayev So, you're saying that the syntax is exactly the same? Also, should i use a function for this? What would you recommend?Dan– Dan2018-10-22 14:00:24 +00:00Commented Oct 22, 2018 at 14:00
-
1The syntax is exactly same because React is a library, not a different language. That's JavaScript.Estus Flask– Estus Flask2018-10-22 14:05:40 +00:00Commented Oct 22, 2018 at 14:05
-
1You already learnt how to do it in Javascript, so you already learnt how to do it in ReactJs.c-chavez– c-chavez2018-10-22 14:27:57 +00:00Commented Oct 22, 2018 at 14:27
|
Show 1 more comment
2 Answers
you can use something like this to store and load your variables to local storage.
export const loadState = (state) => {
try {
const serializedState = localStorage.getItem(state);
if(serializedState === null){
return undefined;
}
return JSON.parse(serializedState);
} catch (err) {
return undefined;
}
};
export const saveState = (state) => {
try{
const serializedState = JSON.stringify(state);
localStorage.setItem('state', serializedState);
} catch (err){
return undefined;
}
}
3 Comments
Dan
Does this save the state of every single variable? Or should this be applied to every variable one by one?
Alexander Staroselsky
@Dan why not try it and see
Rutul Patel
@Dan Whatever you pass as parameters. if you pass full state then answer is yes. It will save all the variables in localStorage.
You can use localStorage and its methods to save data to the local storage. Please see: window.localStorage
A very good and informative article is https://www.robinwieruch.de/local-storage-react/
// To save the item
localStorage.setItem('email', JSON.stringify(this.state.UserEmail))
.then(() => console.log('saved email successfully'))
.catch(err => console.error('something went wrong', err));
// To retrive that item
AsyncStorage.getItem('email')
.then(val => {
if (val !== null) console.log(val); // You can do whatever you want with the email
})
.catch(err => console.error(err)) // if there was an error fetching data
Please note that if there is nothing in the localStorage, it would return 'null' so in order to handle errors you need to put them in the if statement and not in catch
3 Comments
c-chavez
I think it's because he already knows how to do it in javascript, he is not asking how to do it in javascript but in React. To be honest, the question doesn't make any sense at all because he doesn't seem to understand that React uses Javascript
Dan
@UmairAhmed This is helpful, but I don't know who downvoted. I'll read the article though!
Umair Ahmed
Sure. Just try a few things out. Don't worry about breaking it. That's the best way to learn