DEV Community 👩‍💻👨‍💻

Cover image for AsyncStorage, localStorage & cookies

Posted on

AsyncStorage, localStorage & cookies

My first experience implementing authentication was in a full Rails app. For this project I learned how to issue cookies through Sessions. I was introduced to the 'bcrypt' gem and learned some of the basics around password management, encryption, hashing and salts. It seemed I had the learned the essentials to continue creating user-oriented Apps that require account validation.

Soon after building my Rails app I built a React app with a Rails API backend. For this project I learned how to implement authentication combining 'bcrypt' and localStorage. The transition introduced me to more new concepts, such as Tokenization. I was curious why cookies were being phased out of many modern projects in favor of localStorage.

localStorage offers two major improvements:

  1. localStorage allows for 5MB of client-side storage vs 4KB with a cookie.

  2. localStorage does not travel with each HTTP request, unlike cookies. This seems to be the most important difference, as limiting the amount of data traveling back-and-forth to the server is very important when dealing with high volumes.

My most recent project, a React Native app with a Rails API backend, introduced me to a new type of client-side storage, AsyncStorage. AsyncStorage is very similar to localStorage, but built for React Native. It was built to integrate with both iOS and Android to utilize their storage management efficiently.

My takeaway after utilizing cookies, localStorage & AsyncStorage is that localStorage and AsyncStorage are more efficient than cookies, but the most important quality of any authentication system is that sensitive data is well encrypted and handled with care. My research on the topic led me to many other options, such as Redux-persist, Realm & SQLite. Excited to implement one of those for a future project.

Top comments (2)

rriegel profile image
Ryan Riegel

Very cool, I just used localStorage for the first time in a React app, and am interested to learn more about the differences between localStorage and AsyncStorage!

beebeewijaya profile image
Bee Bee Wijaya

Actually you can attach localstorage value in header so it's travel in each HTTP request

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!