Keep a Setting for One Page Session

sessionStorage stores string values in a page session associated with an origin and tab. It suits temporary school-form progress better than a promise of permanent persistence.

Before this topic, review Save a Small Setting Locally if its terms are unfamiliar.

This is JavaScript in a browser. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.

Session Storage is a web storage API provided by the browser that allows you to store key-value pairs in a user's browser memory for the duration of a page session. The data persists only as long as the browser tab is open.

It is useful for temporary data that you don't want to persist across multiple sessions. Once the user closes the tab or window, the session storage data is cleared automatically.

• Data is stored in key-value pairs as strings.
• Data persists per tab — closing the tab removes the data.
• It does not share data across tabs or windows.
• Accessible using the sessionStorage object in JavaScript.

You can store data using sessionStorage.setItem() method, which takes two parameters: key and value.

// Store a user's name
sessionStorage.setItem("username", "JohnDoe");

undefined

Try checking this by typing sessionStorage.getItem("username") in the browser console.

Use the sessionStorage.getItem() method to retrieve stored data.

// Retrieve the stored username
const user = sessionStorage.getItem("username");
console.log(user);

JohnDoe

To remove a particular item, use sessionStorage.removeItem().

// Remove the username from session storage
sessionStorage.removeItem("username");

undefined

To clear all data stored in session storage, use sessionStorage.clear().

// Remove all session storage data
sessionStorage.clear();

undefined

Let’s look at a practical example. Suppose you want to count how many times a user has clicked a button during a session.

// Initialize count if not present
if (!sessionStorage.getItem("clickCount")) {
  sessionStorage.setItem("clickCount", "0");
}

// Simulate a click event
function countClick() {
  let count = parseInt(sessionStorage.getItem("clickCount"));
  count++;
  sessionStorage.setItem("clickCount", count.toString());
  console.log("Click count this session:", count);
}

// Call the function a few times
countClick();
countClick();

Click count this session: 1
Click count this session: 2

What happens if I open the same website in another tab?

Session Storage is tab-specific. The new tab has a fresh session with no stored data from the previous tab.

Can I store objects in Session Storage?

Session Storage only stores strings. You can store objects using JSON.stringify() and retrieve them using JSON.parse().

// Storing an object
const user = { name: "Alice", age: 25 };
sessionStorage.setItem("userData", JSON.stringify(user));

// Retrieving the object
const data = JSON.parse(sessionStorage.getItem("userData"));
console.log(data.name);  // Output: Alice

• To store temporary data specific to a tab.
• During a form submission workflow that should reset if the tab is closed.
• For page-level session state without affecting other tabs.

• Use sessionStorage to store temporary data for the current tab session.
• It is simple, secure, and easy to implement for short-lived data needs.
• Remember to stringify objects before storing and parse when retrieving.

A reload normally retains the session, while closing the tab ends it. New tabs and opener copying require more care than assuming one universal shared session.

Your task: Replace '72' with '80'. Predict the result before running the edited program.

The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.

The temporary stored string changes; its storage lifetime does not.

sessionStorage stores string values in a page session associated with an origin and tab. It suits temporary school-form progress better than a promise of permanent persistence.

Check your variation against this explanation: The temporary stored string changes; its storage lifetime does not.

Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.