VOOZH about

URL: https://www.geeksforgeeks.org/javascript/javascript-sessionstorage/

⇱ JavaScript sessionStorage - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

JavaScript sessionStorage

Last Updated : 23 Jul, 2024

JavaScript sessionStorage is a web storage technique that stores data for the duration of a page session. The sessionStorage object lets you store key/value pairs in the browser. It allows setting, retrieving, and managing data that persists only until the browser tab or window is closed, ensuring data accessibility within the same tab.

Syntax

window.sessionStorage;

Methods of sessionStorage

MethodDescription
setItem(key, value)Sets the data in the sessionStorage with the passed key and value.
getItem(key)Returns the value of the key passed to it, if it is stored in the storage.
removeItem(key)Removes the passed key with its value from the storage.
storage.lengthReturns the total number of stored items in the storage.
key(index)Returns the key stored at the passed index.
clear()Clears all the stored items.

Key Features of JavaScript sessionStorage

  • Temporary Storage: Data is stored only for the duration of the session.
  • Tab-Specific: Data is accessible only within the same browser tab or window.
  • Simple API: Provides straightforward methods for setting, getting, and removing items.
  • Persistent During Reloads: Data persists across page reloads within the same session.
  • Storage Limit: Typically offers around 5MB of storage per origin for session data.

Example: Using sessionStorage with JavaScript

In this example, sessionStorage is used to store, retrieve, and remove key-value pairs. Buttons trigger functions that either set, get, or remove items from sessionStorage, with results displayed in an HTML element.

Output:

Conclusion

JavaScript sessionStorage is a powerful tool for temporarily storing data within a user's session. It provides simple methods to set, retrieve, and manage key-value pairs, ensuring information is available until the browser tab closes. Using sessionStorage enhances user experience by maintaining state and preferences throughout the session.

Comment
Article Tags: