HTML Web Storage API
This article will cover the fundamentals of the HTML Web Storage API, including instructions on how to use it and the benefits it offers in comparison to conventional client-side storage methods.
HTML Web Storage – What is it?
A web application can store data locally within a user’s browser using web storage in HTML Webstorage.
Cookies are used to store application data before HTML5. The advantages of web storage include higher security and the ability to store large quantities of data locally without impacting the website’s performance.
Contrary to cookies, this does not transmit information to the server, and the storage limit is far superior (at least 5MB).
Each domain and protocol has its web storage. Data from one origin can be accessed and stored on all webpages.
HTML Web Storage Usage
HTML Web Storage is an advantageous tool for web developers that enables them to store and retrieve data on the client-side. This approach eliminates the need for server-side databases or cookies, making it an efficient method for saving and accessing data. Here are some common uses of HTML Web Storage:
- Storing User Preferences: Web Storage allows developers to store user-specific preferences, including font size, language settings, color themes, and other settings.
- Caching Data: Frequently used data such as images, videos, and audio files can be cached using Web Storage, resulting in faster website performance and speed.
- Saving User Input: Web Storage can be used to store user input data, such as forms, shopping carts, and comments, which can be retrieved and reused in subsequent sessions.
- Creating Web Applications: Web Storage is a useful tool for developing web applications that function offline. The stored data on the client-side enables users to access and use the web application even without an internet connection.
HTML Web Storage Objects:
The HTML web storage object offers two data storage objects:
- window.localStorage – stores data without expiration
- window.sessionStorage – stores data lost upon closing the browser tab.
To ensure that HTML Webstorage is compatible with the browser, check whether localStorage and sessionStorage are supported:
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support.
}
Browser Compatibility:
The table below indicates which browser version first implemented HTML Webstorage.
| API |  |  |  |  |  |
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
LocalStorage Object:
Data is stored with no expiration period in the localStorage object. Whether the browser is closed tomorrow, next week, or next year, the data will remain accessible.
Example
Here is an example:
- Create a localStorage name/value pair with lastname=”lastname” and value=”Sam”.
- Obtain the value of “lastname” and insert it into the element with the id “result”
As an alternative to the above example, you could write it as follows:
localStorage.lastname = “Thomas”;
// Retrieve
document.getElementById(“result”).innerHTML = localStorage.lastname;
Below example for syntax removing the “lastname” localStorage item:
Important: Strings are always used to store name/value pairs. When necessary, convert them to another format!
A user’s clicks on a button are counted in the following example. This code converts the value string to a number and increases the counter:
HTML Webstorage Example:
Example:
SessionStorage Object:
SessionStorage is identical to localStorage, except it stores only one session’s worth of data. The data is deleted when the user closes the specific browser tab.
An HTML Webstorage session counts how many times a user has clicked a button:
