localStorage or cookies : What's the difference?

LocalStorage vs cookies

The both are there for one reason: storage some information ( setItem ) and use it in other instance.

But there are some differences between then that you should know to choose the best option.

And you should avoid to only use one for every situation, think every time what is the best one for you in the moment. You can use both on your application for multiple screens and features.

Local Storage

LocalStorage is a storage mechanism available in modern web browsers that allows web applications to store data in the user's browser.

It provides a simple key-value store for data that can be accessed by JavaScript running in the user's browser.

The data stored in LocalStorage is persistent, meaning it will remain even if the user closes their browser or turns off their computer.

LocalStorage is typically used to store larger amounts of data that need to be accessed frequently, such as user preferences or session data.

Cookies

Cookies, on the other hand, are small text files that are stored in the user's browser by websites they visit.

Unlike LocalStorage, cookies can be set with an expiration date, meaning they will automatically be deleted after a certain amount of time.

Cookies are typically used to store smaller amounts of data, such as a user's login credentials or their shopping cart items.

Cookies are also sent back to the server with each request, which can be useful for things like tracking user behavior or maintaining a user's session.

About Next.js and SSR

If you're using Next.js, it's important to be aware that LocalStorage may not work as expected with server-side rendering (SSR). This is because LocalStorage relies on the browser's window object, which is not available during SSR. As a result, any attempts to access LocalStorage during SSR will fail.

To work around this limitation, you can use cookies instead. Cookies are supported during SSR, so you can use them to store data that needs to be accessed on both the client and server. There are libraries available, such as nookiesjs, that make it easy to manipulate cookies in Next.js applications.

By using cookies instead of LocalStorage, you can ensure that your application works as expected during SSR, while still being able to store and access data on the client-side.

What is the best option for me ?

Avoid to choose then like a soccer team, or some like this. Choose the best one for your feature and change if necessary.

In summary, LocalStorage and cookies are both useful storage mechanisms for web applications, but they have distinct differences that make them suitable for different use cases. By understanding the differences between these two mechanisms, developers can choose the best approach for their specific needs.

Hope this post can be helpful!
For some feedback or more content, follow me on twitter or github