- Gyanendra Kumar Knojiya
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.
Table of content-
- What is Client-side storage?
- Client-Side Storage Types
- 1. What is the localStorage?
- 2. What is Session Storage?
- Local Storage vs Session Storage
- 3. Cookies
What is Client-side storage?
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).
Image is taken from wikimedia
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.
When does it come in handy?
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.)
Client-Side Storage Types
Here are type of client-side storage-
- Local Storage
- Session Storage
- Indexed DB
1. What is the localStorage?
Where we find this stored data
Web storage data is saved in a 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.
Methods for add and removing data from 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
2. What is Session Storage?
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 the Session Storage will be removed.
Methods for add and remove data from session storage
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
Local Storage vs Session Storage
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.
|Local Storage||Session Storage|
|Maximum Size||10-15 MB||5MB|
|Data Access||Anywhere in browser (Same domain)||Window/Tab only|
|Expiry||removeItem() or clear()||When browser or tab closed|
Image Source unsplash
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 data.
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=/;'