JavaScript SessionStorage Example

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

The sessionStorage object stores data for only one session (the data is deleted when the browser tab is closed).

JavaScript  SessionStorage Methods

To use SessionStorage in your web applications, there are 5 methods to choose from:

1. setItem(): Add key and value to SessionStorage
2. getItem(): Retrieve a value by the key from SessionStorage
3. removeItem(): Remove an item by key from SessionStorage
4. clear(): Clear all SessionStorage
5. key(): Passed a number to retrieve nth key of a SessionStorage

Syntax

window.sessionStorage

The syntax for SAVING data to sessionStorage:

sessionStorage.setItem("key", "value");

The syntax for READING data from sessionStorage:

var lastname = sessionStorage.getItem("key");

The syntax for REMOVING saved data from sessionStorage:

sessionStorage.removeItem("key");

The syntax for REMOVING ALL saved data from sessionStorage:

sessionStorage.clear();

Syntax for Key() Method:

var KeyName = sessionStorage.key(index);

Let's demonstrate each method of SessionStorage with example.

JavaScript  SessionStorage Example

Use the setItem() method, which takes two parameters, a key and a value. The key can be referenced later to fetch the value attached to it.

sessionStorage.setItem("firstName", "Ramesh");

Where "firstName" is the key and "Ramesh" is the value. Also, note that unlike LocalStorage, the sessionStoragecan only store strings.

To store arrays or objects you would have to convert them to strings.

To do this we use the JSON.stringify() method before passing to setItem() .

var user = {
 firstName : "Ramesh",
 lastName : "Fadatare"
}
sessionStorage.setItem("id", JSON.stringify(user));

To retrieve the user object from the key stored above:

sessionStorage.getItem('id');

This returns a string with value as;

"{"firstName":"Ramesh","lastName":"Fadatare"}"

Let's use the removeItem() method to remove the item from the key. Let's remove the user object previously stored using setItem() method:

sessionStorage.removeItem('id');

when invoked clears the entire storage of all records for that domain. It does not receive any parameters.

sessionStorage.clear();

Reference

https://www.javaguides.net/2019/05/javascript-sessionstorage-methods.html

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF