JavaScript - SessionStorage

Session Storage in JavaScript

The JavaScript sessionStorage object is a window object property that appears in all current browsers. The page’s protocol, host-name and port are linked to any sessionStorage data. Each window contains its own session storage. The JavaScript sessionStorage method contributes to the reliable storage of user data.

In JavaScript, we use the getItem() method to get elements that are always stored in the session storage attribute. The storage object includes a getItem() method. It could be a JavaScript session Storage object or a local Storage object.

Syntax

Below is the syntax of the JavaScriptSessionStorage−

window.sessionStorage;

Methods of SessionStorage

To get an element from JavaScript sessionStorage we have to create the element and save it to session storage. We can get it back later. The storage object has four methods: setItem(), getItem(), removeItem(), key() and clean().

setItem()

Used to save information in a session storage item. Here is how you can use it in your code −

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

getItem()

Used to retrieve and display a session storage item. Following is way you can use it in your code −

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

removeItem()

Used to delete a specific item from session storage. The following is how you can utilize it in your code −

sessionStorage.removeItem("key");

key()

Used to get the name of a data item in session storage. Here is how you can utilize it in your code −

let keyName = sessionStorage.key(index);

clear()

Used to clear all items in session storage. Here’s how you can put it into your code −

sessionStorage.clear();

Why do use sessionStorage in JavaScript

SessionStorage can be used in many different ways. And these are the most important ones:

• The web-page interface can be saved in session storage.
• When the user returns to the page later, you can use sessionStorage to restore the previously saves user interface.
• SessionStorage can also be used to transmit data between pages instead of using hidden input fields or URL parameters.

Key Features

Below are some key features of JavaScript’s SessionStorage −

• Temporary Storage:Data is only stored for the duration of the session.
• Tab-specific:Data is only accessible in the same browser tab or window.
• Simple API:Provides simple methods for configuring, retrieving, and removing items.
• Persistent During Reloads:Data is preserved after a page reload within the same session.
• Storage Limit:Typically gives about 5MB of storage per origin for session data.

Examples

Following are some examples of the session storage −

Example 1

The example below shows how to use JavaScript sessionStorage with the set and get items methods. A session storage object helps us to create arrays and set data. After that, display information by calling the object’s getItem() function.

Output

This will generate the below result −

Display Data Using sessionStorage in JavaScript

{"name":"Amit","rollNumber":37,"website":"CodesCompiler","learningMode":"online","age":19,"subject":"JavaScript"}

{"subject":"JavaScript","website":"CodesCompiler","mode":"online","cost":"Free","targetAudience":"students and beginners"}

Example 2

This example shows how to use JavaScript session storage with the set and get items methods. To display the date and time, we can use the object’s getItem() method. The array value use the get and set methods, whereas the date value writes data immediately.

Output

This will lead to the following result −

Display Data Using sessionStorage in JavaScript
{"name":"Amit","rollNumber":52,"website":"CodesCompiler","learningMode":"online mode","age":22,"subject":"JavaScript"}
Fri Oct 25 2024 13:14:10 GMT+0530 (India Standard Time)

Example 3

Here is an example of using sessionStorage in an HTML file with JavaScript. The sessionStorage is used to save data for the life of the session and makes it available as long as the browser tab is open.

Output

So you have to open the file in a browser. Then enter a name and then click Save Name. After that you have to click Show Name to see the stored name. And click Clear Name to remove it from storage.

Summary

The sessionStorage allows you to store data just for a single session. When you close a browser tab or window, the sessionStorage data is automatically removed. As the sessionStorage is a Storage system object, you can handle its data using Storage-specific methods.