LocalStorage and Cookies: differences and usage

Cookies

They are data stored in the browser and created to persist user information in session. Cookies will be created to identify the user on a website and to track their navigation by sending this data to the browser.

Through them, it allows the user, in the event of leaving the website and returning to it after a few days (if the cookies have not been deleted or their expiration time has not expired), to recover the data from their previous session.

The user experience through cookies improves exponentially because without them, the user would have to log in again after closing the website and would have to (in the case of ecommerce) re-add to the cart all the products that were associated with it in the previous session. Cookies are a very important and, in many cases, indispensable part of the internet experience.

Pros and cons of cookies:

Pros:

Practically all e-commerce stores save the cart information in the cookie to persist it and prevent it from disappearing after the browser is closed.
Remember the information from the form after it has been submitted.
Store language and currency preferences.
Set a caducity for the cookie.
Allows web servers to know if the user has logged in to the website.
If cookies are not allowed, the previous behavior will not occur and it will never remember if you are logged in or not.

Cons:

The datos are not encriptados.
The size of the request is limited to 4KB.
SQL injection can be performed from a cookie.

LocalStorage

It is a new feature brought by the new HTML5 revision which allows us to store key-value type information on the client side. This technology can be used in new versions of browsers and is the standard intended for transitioning when persisting data in the browser. Just like with cookies, LocalStorage allows maintaining client data but with the difference that in the latter, it can only be accessed from the current window where you are browsing and from the current domain.

Pros y contras del LocalStorage:

Pros:

Data can be accessed easily and quickly.
No Internet connection is required to access the data.
Storage limit: 5 MB per origin in Google Chrome, Mozilla Firefox, and Opera. 10 MB per storage area in Internet Explorer

Cons:

The information stored in it cannot be directly accessible from the server.
Periodic backups are required to prevent data loss.
The user is responsible for the security of the data.

Conclusion:

Storage in cookies and LocalStorage have different purposes. As mentioned before, cookies can be directly read from the server, whereas LocalStorage only stores and allows data to be read from the client. Cookies have a much smaller storage limit compared to LocalStorage, and technically, LocalStorage is easier to use and gives you more to work with.

What would determine whether to use one method or another to store and persist user data on the website would be whether it is required on the client or on the server.