DEV Community

Cover image for Javascript local storage - beginner's guide

Javascript local storage - beginner's guide

Arika O on May 12, 2021

Before going into any kind of explanation, we need to understand the difference between server side storage and client side storage when it comes t...
Collapse
 
nithish_13 profile image
Nithish Kumar

It seems like you have deleted the previous post and then re-created it.
Tnx for the post :)

Collapse
 
arikaturika profile image
Arika O

Yes, true. To answer your question, I believe your usage of localStorage is safe, for development purposes. Unrelated to localStorge, what I would pay attention to would be not to expose your API key if the API you're using has provided you with a private key (that if tou chose to upload your project using Gihub Pages, Netlify etc).

Collapse
 
nithish_13 profile image
Nithish Kumar

I agree. For that reason, I use .env to protect api key

Thread Thread
 
arikaturika profile image
Arika O

Even if you store your keys in an .env file, they will be exposed once the React project is built. For more details you can read this article

Thread Thread
 
michaelcurrin profile image
Michael Currin • Edited

Indeed. A file with credentials should not be read by the client / frontend by JS because it means a user can access the value too.

An appropriate use for .env file credentials is if your frontend did not care about this details at all. But you have a server side REST API or Lambda which internally loads the .env file and obscures the values and then your frontend requests that service.

Also remember that a .env on GitHub can be read by other users. So typically you would use secret environment variables set in your CI so that only you and admin users can see the values and they get used in the app at build time, and when the app starts.

Thread Thread
 
arikaturika profile image
Arika O

But you have a server side REST API or Lambda which internally loads the .env file and obscures the values and then your frontend requests that service.

Do you have some resources on how to achieve this exactly? I've been dealing with this issue myself but I nevet got into details on how to obscure my API keys. Thank you!

Collapse
 
pchilligp profile image
pchilligp

Nie!!!

Collapse
 
pchilligp profile image
pchilligp

Sorry nice!!!

Collapse
 
chrisczopp profile image
chris-czopp

it is tab specific, meaning each browser tab we open will have different data in the localStorage

Not if the tabs share the same origin. It's only true if you use sessionStorage

Collapse
 
arikaturika profile image
Arika O

True, I forgot to mention that. Thx!

Collapse
 
arikaturika profile image
Arika O • Edited

Thx for pointing out the typos (bad copy paste :D). I mentioned you can access the storage both ways (with or without window), but yes, I might as well remove the window keyword in the examples.

Collapse
 
aalphaindia profile image
Pawan Pawar

Thanks for sharing!

Collapse
 
veekeey profile image
Veekeey

Very useful... Thank you

Collapse
 
chadgotis profile image
Chadric Gotis

Thanks for this wonderful post :)

Collapse
 
arikaturika profile image
Arika O

Thx for reading, I hope it was useful.

Collapse
 
sabiyatabassum profile image
Sabiya Tabassum

Nice post. Thanks for sharing.