What is the use of the sessionStorage object in JavaScript?

The sessionStorage object in JavaScript is a web storage mechanism that allows developers to store and retrieve data on the client-side.

Unlike localStorage, which stores data that persists even after the browser is closed, sessionStorage stores data that is only available for the duration of the current browser session.

Once the browser window is closed, the data stored in sessionStorage is automatically deleted.

The sessionStorage object provides a simple key-value store, where data is stored as strings. It is limited to storing only string key-value pairs, but developers can use JSON.stringify() and JSON.parse() methods to store and retrieve JavaScript objects and arrays as strings in sessionStorage.

Here are some use cases for sessionStorage:

1. Storing temporary data:

sessionStorage is commonly used to store temporary data that is only needed during the current session, such as user authentication tokens, temporary cache data, or form data that needs to be persisted across multiple pages in a web application.

Example:

// Storing data in sessionStorage
sessionStorage.setItem("username", "John");
sessionStorage.setItem("isLoggedIn", true);

// Retrieving data from sessionStorage
const username = sessionStorage.getItem("username");
const isLoggedIn = JSON.parse(sessionStorage.getItem("isLoggedIn"));

console.log(username); // Output: John
console.log(isLoggedIn); // Output: true

2. Implementing client-side caching:

sessionStorage can be used as a client-side cache for storing frequently used data, such as API responses or other data that can be retrieved from the server.

This can help reduce the number of server requests and improve the performance of a web application.

For example:

// Check if data exists in sessionStorage
const cachedData = sessionStorage.getItem("apiData");

if (!cachedData) {
  // If data is not cached, fetch from API and store in sessionStorage
  fetch("https://api.example.com/data")
    .then((response) => response.json())
    .then((data) => {
      // Store data in sessionStorage
      sessionStorage.setItem("apiData", JSON.stringify(data));
      // Use the data
      processData(data);
    })
    .catch((error) => console.error(error));
} else {
  // If data is cached, use the cached data
  processData(JSON.parse(cachedData));
}

3. Implementing multi-page web applications:

sessionStorage can be used to share data between different pages of a web application that are open in the same browser window. This can be useful for maintaining state or passing data between pages without the need for server-side storage or additional API requests.

For example:

// Page 1 - Store data in sessionStorage
sessionStorage.setItem("productId", "1234");

// Page 2 - Retrieve data from sessionStorage
const productId = sessionStorage.getItem("productId");
console.log(productId); // Output: 1234

4. Storing user preferences:

sessionStorage can be used to store user preferences, such as theme settings, language preferences, or other user-specific configurations, so that the preferences persist during the current session.

For example:

// Store user preferences in sessionStorage
sessionStorage.setItem("theme", "dark");
sessionStorage.setItem("language", "en");

// Retrieve user preferences from sessionStorage
const theme = sessionStorage.getItem("theme");
const language = sessionStorage.getItem("language");

// Apply user preferences to the UI
applyTheme(theme);
setLanguage(language);

5. Storing data for offline use:

sessionStorage can be used to store data that is needed for offline use in a progressive web application (PWA). When the application is offline, the data stored in sessionStorage can be used to provide offline functionality, such as displaying cached data or allowing users to continue working with the application even when they are not connected to the internet.

For example:

// Store offline data in sessionStorage
sessionStorage.setItem("offlineData", JSON.stringify(myOfflineData));

// Retrieve offline data from sessionStorage
const offlineData = JSON.parse(sessionStorage.getItem("offlineData"));

// Use offline data to provide offline functionality
if (!navigator.onLine) {
  displayCachedData(offlineData);
}

Here are some additional methods available on the sessionStorage object:

• sessionStorage.removeItem(key): Removes the item with the specified key from sessionStorage.

// Removing an item from sessionStorage
sessionStorage.removeItem("username");

• sessionStorage.clear(): Removes all items from sessionStorage.

// Clearing all items from sessionStorage
sessionStorage.clear();

• sessionStorage.key(index): Returns the key at the specified index in sessionStorage.

// Retrieving the key at index 0 from sessionStorage
const key = sessionStorage.key(0);
console.log(key); // Output: "username"

Thank you for reading, and let’s have conversation with each other

Thank you for reading my article. Let’s have conversation on Twitter and LinkedIn by connecting.