There are 3 ways to store data in the browser.
Often the development process required storing data in the browser. We need to implement this feature to give users the best possible user experience. The 3 ways to store data, which are...
Cookies, Local Storage & Session Storage
Let's have a look at these 3 at once
We can access Local storage, session storage and cookies from the
inspect element > Application
of the chrome browser
Duration:
Cookies are stored on the user's computer and have a limited lifespan, which can be set by the server.
Session storage and local storage are stored in the browser itself and are only deleted when the user clears their browser data or when the data expires.
Local storage is more permanent, as the data stored in local storage is not deleted when the browser is closed.
Size:
Cookies are limited to around 4KB of data per cookie. Session storage and local storage can store larger amounts of data, up to around** 5MB**.
Scope:
Cookies are sent back to the server with each subsequent request, so the server can use the data stored in the cookie. Session storage and local storage are only accessible by the client-side JavaScript code on the website and are not sent back to the server with each request.
Security:
Cookies can be marked as "secure," which means they will only be sent over an encrypted connection (HTTPS). Session storage and local storage are only accessible from the website that created them and is not shared with other websites.
Use cases:
Cookies are commonly used to store data that the server needs to remember, like a user's login credentials or shopping cart contents. Session storage and local storage are more commonly used to store data that is only needed on the client side, like user preferences or settings. Local storage is useful for storing data that needs to be persisted across multiple sessions, like user preferences or settings.