What are the advantages and disadvantages of localStorage, sessionStorage, session, and cookies from a technological standpoint, and when should we utilize one over the other?
On the client-side, today’s Web applications process massive volumes of data. They may even need to be able to work without internet access. These requirements help to explain why client-side data storage is so important for next-generation Web-based applications.
Client-side storage, as the name implies, allows the user to store data on the client (i.e. the user’s browser). And Server-side storage, on the other hand, keeps data on the server (i.e. an external database).
Nowadays, Pages are dynamically loaded in many browsers. This means they retrieve data from the server and render it in the browser using server-side storage. Client-side storage can, nevertheless, be advantageous in some circumstances.
The following use scenarios may benefit from client-side storage:
- Data may be accessed quickly and without the need for a network.
- User preferences can be saved (i.e. font size, theme, etc.)
- Save the previous activity’s session (i.e. auth token, user details, shopping cart, etc.)
Here are types of client-side storage-
- Local Storage
- Session Storage
- Indexed DB
Web storage data is saved in an SQLite file in a subdirectory in the user’s profile in Google Chrome. On Windows PCs, the subdirectory is stored at \AppData\Local\Google\Chrome\User Data\Default\Local Storage whereas, on macOS, it is found at ~/Library/Application Support/Google/Chrome/Default/Local Storage.
There are five different ways to use localStorage in your web applications:
localStorage.setItem('Key', 'value') localStorage.getItem('Key') localStorage.removeItem('Key') localStorage.clear() _// Clear all localStorage_ localStorage.key() _// Pass a number to retrieve the key of a localStorage_ Object.keys(localStorage); find all keys
The Session Storage saves data in the form of Keys and Values for a single session. When the browser is closed, the data stored in Session Storage will be removed.
sessionStorage.setItem('Key', 'Value') _// Save data to sessionStorage_ sessionStorage.getItem('Key') _// Get saved data from sessionStorage_ sessionStorage.removeItem('Key') _// Remove saved data from sessionStorage_ sessionStorage.clear() _// Remove all saved data from sessionStorage_
The expiration date is the difference between Local Storage and Session Storage-
localStorage data will survive until
- Deleted by function (clear or remove).
- The browser data is cleared by the user.
If the user is using incognito or private browsing, Local Storage data will be lost.
When a tab or browser is closed, the session storage is removed.
A cookie is a term that most people are familiar with. They’re the most common sort of client-side storage, and they’ve been there since the dawn of the internet.
The server sends cookies to the client, which are subsequently stored on the client. When the client makes another request to the server, the saved cookie can be retrieved and delivered back to the server. Cookies are commonly used to track user statistics, manage account sessions, and save user information.
Cookies, on the other hand, are the oldest types of client-side storage, and as such, they have several security and storage constraints, making them an undesirable option for storing client-side
document.cookie = 'username=Gyanendra' document.cookie = 'username=Gyanendra; expires=any upcoming date and time; path=/' document.cookie = 'username=Gyanendra; expires=passed date and time; path=/;'
Written by Gyanendra Knojiya.
Buy a coffee for me here https://www.buymeacoffee.com/gyanknojiya
Originally published at https://codingcafe.co.in on November 18, 2021.