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!

Thread Thread
 
michaelcurrin profile image
Michael Currin

If you have a simple app that does one thing then consider Netlify Functions, similar to Lambda but letting you run server side Node code and the frontend interfaces through API requests. And it is serveless so you don't need to set up a Node server! Add a file in the right directory and Netlify will deploy your serverless code. In your Function file, you would reference process.env.

And the value would be set in the env variables in your Netlify admin view.

For example if you want to search the Twitter API using your secret keys but allow users to input their own search terms and not have to do any auth themselves.

Here is an article I found

dev.to/irohitgaur/how-to-access-ap...

Thread Thread
 
michaelcurrin profile image
Michael Currin

I have an example of a file and site for reference. I use frontend JS to query the Function and return the result on the frontend.

github.com/MichaelCurrin/netflix-a...

It doesn't use an API key because the external API doesn't need one. But for Twitter where you do need one, I would have set and used env variables as in my previous comment. Note I would not use a .env file because it would be stored in version control and maybe accidentally deployed as a public file on the site. Keep your secrets out of version control and in your CI tool env variables. Or say AWS secrets manager.

Thread Thread
 
michaelcurrin profile image
Michael Currin

Drifting from the web app flow, here is how to use secret environment variables on GitHub Actions to post a tweet.

github.com/MichaelCurrin/tweet-gh-...

Thread Thread
 
michaelcurrin profile image
Michael Currin

If you are making complex app handling say user profiles and photos then instead of Function you probably need to make a REST API with Express JS or Flask (Python) and maybe a database. And host that on Vercel or AWS. And your app would read the env variables on process.env or os.env when the app starts but only send and receive precise info to the user so they cannot see the API key used behind the scenes.

Thread Thread
 
arikaturika profile image
Arika O

Thank you so much for all the resources, sounds very interesting (and tricky :D)!

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
 
veekeey profile image
Veekeey

Very useful... Thank you

Collapse
 
aalphaindia profile image
Pawan Pawar

Thanks for sharing!

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
 
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.