Improve your user experience with web storage ⚡️
As an end user, have you ever found yourself in the annoying situation where you've diligently filled out a lengthy form, only to encounter an error that causes you to lose all your input?
As a developer, have you ever had to implement a feature where users are required to input their email, undergo email verification, and then the system necessitates additional data for various purposes? Yet, you realize the importance of not compelling users to input everything from scratch.
In such circumstances, utilizing web storage is essential. The general concept is to save somewhere — whether in your database or simply in your web storage. Upon the user's subsequent access to your website on that device, the process is retrieved, allowing them to seamlessly continue their work.
There are two mechanisms in Web Storage, namely:
1. Session storage:
• maintains data in the browser for the duration of the page session, persisting until the browser (or tab) is closed.
• the data can only be accessed from the same source.
window.sessionStorage.setItem("session", "value" + Date.now())window.sessionStorage.getItem("session")window.sessionStorage.removeItem("session")window.sessionStorage.clear()2. Local storage:
• serves the same purpose but maintains persistence without time limit.
window.localStorage.setItem("local", "value" + Date.now())window.localStorage.getItem("local")window.localStorage.removeItem("local")window.localStorage.clear()I have introduced two web storage mechanisms that can be applied to various use cases, enhancing the overall user experience. Here are some examples
• cached data for offline access.
• form data persistence, offline form data.
• keep track shopping cart information.
• persist user preferences: dark mode or light mode...
• remember me functionality.
• recent activity tracking.
In addition to the two types of storage mentioned above, there is also IndexedDB and Cookies. See you in the next blog.
Merry Christmas, techies. ☃️☃️☃️