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
Get data from sessionStorage in JavaScript?
Let us discuss how to get data from with suitable examples in Javascript.
The sessionStorage Object is a window object property that exists in all modern browsers. Any data kept in sessionStorage is linked to the page's protocol, hostname, and port. The session storage is unique for every window. The sessionStorage object is a method that really helps to retain data on the client in a safe manner.
To access the elements from session storage in javascript, we use getItem() method which helps us to access elements that are stored in the session storage object. The getItem() method belongs to the storage object. It can be a local storage object or a session Storage object. To get an element from session storage, firstly we need to create an element and store it in the session storage. Later, we can retrieve it. The methods of the storage object are setItem(), getItem(), removeItem(), and clear().
setItem() is used to set the value for the session storage item.
getItem() is used to retreive the session storage item.
removeItem() is used to remove a particular session storage item.
clear() is used to remove all the items in the session storage.
Syntax
The syntax to represent for retrieval of an element from session storage in Javascript is −
sessionStorage.getItem(‘key name’);
Where, key is the single parameter, and the return value is a string.
Example 1
This is an example program to get the data from session storage.
<html>
<head>
<title>Get data from sessionStorage in JavaScript?</title>
</head>
<body style="text-align: center;">
<p>Retreiving data from sessionStorage in JavaScript</p>
<p id="result"></p>
<script>
const Employee = {
name: 'Chatur',
employee_id : 1037,
company_name : 'Facebook',
role : 'Software Developer',
age: 27
}
sessionStorage.setItem("Employee", JSON.stringify(Employee));
document.getElementById('result').innerHTML = sessionStorage.getItem('Employee');
</script>
</body>
</html>
On executing the above code, the below output is generated.
Example 2
This is an example program for creation and retrieval of the session storage item in javascript.
<html>
<head>
<title>Retrieve element from Session storage in JavaScript?</title>
</head>
<body style="text-align: center;">
<p>Retrieving elements from Session storage in JavaScript</p>
<p id="result"></p>
<script>
let datetime = new Date();
let time = datetime.toLocaleTimeString();
sessionStorage.current_time = time;// Create an element in the Session storage object.
document.getElementById('result').innerHTML = sessionStorage.getItem('current_time'); //Retreive the element.
</script>
</body>
</html>
On executing the above code, the below output is generated.
Example 3
This is an example program to delete a particular item or to remove all the items of session storage in javascript.
<html>
<head>
<title>Retrieve element from Session storage in JavaScript?</title>
</head>
<body style="text-align: center;">
<p>Retrieving elements from session storage in JavaScript</p>
<p id="result"></p>
<script>
const Employee = {
name: 'Chatur',
employee_id : 1037,
company_name : 'Facebook',
role : 'Software Developer',
age: 27
}
sessionStorage.def_storage_type = 'Session storage'
sessionStorage.setItem("Employee", JSON.stringify(Employee));
document.getElementById('result').innerHTML = 'sessionStorage.getItem("Employee") : ' + sessionStorage.getItem("Employee") +'<br/>' + "sessionStorage.getItem('def_storage_type') : " + sessionStorage.getItem('def_storage_type') +'<br/>'; //Retreive the element.
sessionStorage.removeItem('def_storage_type');
document.getElementById('result').innerHTML += '<br/>' + 'After deleting the element def_storage_type: ' +'<br/>' + "sessionStorage.getItem('def_storage_type') : " + sessionStorage.getItem('def_storage_type') +'<br/>';sessionStorage.clear();
document.getElementById('result').innerHTML += '<br/>' +"The data in the Session storage has been cleared using clear()" + '<br/>' +"sessionStorage.getItem('user') : " + sessionStorage.getItem('user') + '<br/>' +"sessionStorage.getItem('def_storage_type') : " + sessionStorage.getItem('def_storage_type');
</script>
</body>
</html>
On executing the above code, the below output is generated.
12K+ Views
