Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Different types of storages in HTML5
Web applications can store data locally in the user's browser using web storage. Application data had to be kept in cookies and sent along with every server request prior to HTML5. Large volumes of data can be kept locally without degrading the functionality of a website using web storage, which is more secure.
In contrast to cookies, there is no information transfer to the server and the storage capacity is much higher (at least 5MB). Storage on the web is per origin (per domain and protocol). The same data can be stored and accessed by all pages coming from one origin. HTML web storage provides two objects for storing data on the client.
Window.localstorage − No expiration for the stored data.
Window.sessionstorage − data will be stored for certain kind of session.
Let’s dive into the article to learn about the storages one by one in HTML.
HTML localstorage
The local storage uses the localStorage object to permanently store data for your entire website.
localStorage.setItem(key, value) stores the data associated with a key.
localStorage.getItem(key) retrieves the data associated with the key.
Example
In the following example we are using localstroge to store our data in the web without expiration.
<!DOCTYPE html>
<html>
<body style="height:100px;">
<input id="name" type="name" placeholder="enter your name" />
<button type="submit" onClick="handleClick()">Click</button>
<br />
<div id="Varma"></div>
<script>
function handleClick() {
if (typeof Storage !== "undefined") {
let name = document.getElementById("name").value;
localStorage.setItem("name", name);
document.getElementById("Varma").innerHTML = "Welcome To Tutorialspoint" + " " + localStorage.name;
} else {
alert("Sorry! your browser doesn't support Web Storage");
}
}
</script>
</body>
</html>
On running the above code, the output window will pop up, displaying the input field along with a click button on the webpage. When the user enters the text in the input field and clicks the button. The text gets stored in local storage.
HTML sessionstorage
The sessionStorage object functions similarly to localStorage, with the exception that it only saves data for one session, or until the user closes that window or tab.
Example
The sessionStorage object functions similarly to localStorage, with the exception that it only saves data for one session, or until the user closes that window or tab.
<!DOCTYPE html>
<html>
<body style="height:100px;">
<input id="name" type="name" placeholder="enter your name">
<button type="submit" onClick="handleClick()">Click</button>
<br>
<div id="Varma"></div>
<script>
function handleClick() {
if (typeof(Storage) !== "undefined") {
let name = document.getElementById("name").value;
sessionStorage.setItem("name", name);
document.getElementById("Varma").innerHTML = ("Welcome To tutorialspoint" + " " + sessionStorage.name);
} else {
alert("Sorry! your browser is not supporting the browser")
}
}
</script>
</body>
</html>
On executing the above script, it will generate the output displaying the input field along with a click button. When a user clicks the button after entering the input field, the data gets stored in session storage where the data gets erased after particular session.
10 Views
