What are the different types of storage in HTML5 ?
Last Updated :
15 May, 2023
In this article, you will get to know about different types of Web storage in HTML5. The web storage is more secure and large amounts of data can be stored locally on the client-side web browser. All the data is stored in key-value pairs.
In HTML5 there are two types of web storage API.
localStorage: It is used to store data on the client side. It has no expiration time, so the data in the LocalStorage exists always till the user manually deletes it.
Syntax:
- For storing data in web storage: The key and value both should be string or number;
LocalStorage.setItem("key", "value"); - For getting data from web storage: We will pass the key and it will return value.
LocalStorage.getItem("key");
Example: In this example, we will use local storage.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: green;
text-align: center;
font-size: 30px;
margin-top: 30px;
font-style: italic;
}
#data {
text-align: center;
}
</style>
</head>
<body>
<input id="name"
type="name"
placeholder="enter your name" />
<button type="submit" onClick="handleClick()">
click
</button>
<br />
<div id="data"></div>
<script>
function handleClick() {
if (typeof Storage !== "undefined") {
let name = document.getElementById("name").value;
localStorage.setItem("name", name);
document.getElementById("data").innerHTML =
"Welcome To GeeksforGeeks" + " " + localStorage.name;
} else {
alert("Sorry! your browser doesn't support Web Storage");
}
}
</script>
</body>
</html>
Output:
Stored data on Local Storage :
We can clearly see that local storage items are stored in the form of key/value pair and you can check by inspecting elements on the web page and then go to the Application option where you will find the local storage.
As the localStorage object stores the data with no expiration date, you can cross-check this by closing the current tab and visiting the same page again, you will find the same data is present in the localStorage of that tab or window.
Session Storage: It is used to store data on the client-side. Data in the SessionStorage exist till the current tab is open, if we close the current tab then our data will also erase automatically from the SessionStorage.
Syntax:
- For storing data in web storage:
SessionStorage.setItem("key", "value");- For getting data from web storage:
SessionStorage.getItem("key");
Example: In this example, we will use session storage
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: green;
text-align: center;
font-size: 30px;
margin-top: 30px;
font-style: italic;
}
#data {
text-align: center;
}
</style>
</head>
<body>
<input id="name"
type="name"
placeholder="enter your name">
<button type="submit" onClick="handleClick()">
click
</button>
<br>
<div id="data"></div>
<script>
function handleClick() {
if (typeof (Storage) !== "undefined") {
let name = document.getElementById("name").value;
sessionStorage.setItem("name", name);
document.getElementById("data").innerHTML =
("Welcome To GeeksforGeeks" + " " + sessionStorage.name);
}
else {
alert("Sorry! your browser is not supporting the browser")
}
}
</script>
</body>
</html>
Output:
Stored data on Session Storage :
As the sessionStorage object stores the data with the expiration date, you can cross-check this by closing the current tab and visiting the same page again, you will find that data is empty in the sessionStorage of that tab or window.
Similar Reads
What are the HTML tags that deprecated in HTML5 ? In this article, we will see the various deprecated Html tags & their alternative tags in HTML5. Deprecated tags are those tags that are allowed, but not recommended for use and are being replaced by newer ones. The tag or attributes depreciated when the same attributes are achieved in some othe
3 min read
Different ways to add media in HTML page These days one of the most important things on the web is media. So all the developers and websites owners want to make their websites attractive and interactive. For they need to include media in their sites. There are lots of media types, audio, video, etc. There are different ways to include thos
2 min read
What are the main functions of HTML DOM ? DOM or Document Object Model is an API(Application Programming Interface) that represents the HTML document in the form of the Tree structure such that programs can access and change the style and structure of the HTML document. The DOM object is automatically created by the web browser itself upon
3 min read
What are the media element tags introduced by HTML5 ? HTML5 introduced 5 most popular media element tags i.e. <audio>, <video>, <source>, <embed>, <track>. These media element tags changed the entire development using HTML. In this article, you will get to know about these five media element tags briefly.Media Tags:Media T
3 min read
What are different video formats supported by browsers in HTML ? In modern web development, videos play a crucial role in enhancing the user experience on websites. Browsers support different video formats, such as MP4, WebM, and Ogg, but each has its own compatibility and use cases. In this article, we'll explore the most commonly supported video formats in HTML
4 min read
What are the HTML tags used to display the data in the tabular form ? In this article, we will know the HTML tags that can be used to display the data in tabular form. A table is a representation of data in rows and columns, that helps to organize the complex structured data. Tables are widely used in communication, research, and data analysis. For instance, if we nee
4 min read
What are the various formatting tags available in HTML ? As we know, HTML provides many predefined elements that are used to change the formatting of text. The formatting can be used to set the text styles (like – bold, italic, or emphasized, etc.), highlight the text, make text superscript and subscript, etc. In this article, we will discuss different fo
3 min read
What is the mechanism to store the data on the client's browser in HTML ? Server-side storage stores data on the server (i.e. an external database) and client-side storage allow the user to store data on the client (i.e. user's browser). Â client-side storage consists of JavaScript APIs that allow you to store data on the client i.e. on the user's machine and then retrieve
4 min read
Top 10 Uses of HTML in the Real World HTML (Hyper Text Markup Language) - is the backbone of the web- a powerful yet simple language that forms the structure of nearly every website we use today. While it's often associated with basic web page creation, HTML's capabilities extend far beyond that. With the arrival of HTML 5, it has evolv
8 min read
What is the difference between DOM and BOM ? In this article, we will know about the Document Object Model (DOM) & Browser Object Model (BOM), along with understanding their basic implementation through the examples & the differences between them. Document Object Model (DOM) is a programming interface for HTML and XML documents, that a
5 min read