The sessionStorage object stores data for only one session (the data is deleted when the browser tab is closed).
Check out JavaScript Posts, examples, and tutorials at JavaScript Tutorials, Articles, Examples.
Tip - Coding in Browser
Let's demonstrate how to store and view data stored in the web browser using the sessionStorage object. Let's code directly in a browser.
- Enter some domain in the web browser, for example - "https://www.javaguides.net/".
- Inspect web page and go to console.
- Type below JavaScript code snippet and hit enter button.
sessionStorage.setItem("userName", "Ramesh");
- Go to Application tab under Storage menu you can find SessionStorage -> "https://www.javaguides.net/".
- Click on domain "https://www.javaguides.net/" and filter for "userName".
The below gif file summarize the above steps:
JavaScript SessionStorage Methods
To use SessionStorage in your web applications, there are 5 methods to choose from:
- setItem(): Add key and value to SessionStorage
- getItem(): Retrieve a value by the key from SessionStorage
- removeItem(): Remove an item by key from SessionStorage
- clear(): Clear all SessionStorage
- 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.
SessionStorage.setItem() Method
This method just as the name implies allows you to store values in the sessionStorage object.
It 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 sessionStorage can 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));
Note that the data is deleted when the browser tab is closed.
sessionStorage.getItem() Method
The getItem() method allows you to access the data stored in the browser’s sessionStorage object.
It accepts only one parameter which is the key and returns the value as a string.
To retrieve the user object from the key stored above:
sessionStorage.getItem('id');
This returns a string with value as;
"{"firstName":"Ramesh","lastName":"Fadatare"}"
To use this value, you would have to convert it back to an object using JSON.parse() method.
JSON.parse(sessionStorage.getItem('id'));
sessionStorage.removeItem() Method
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');
sessionStorage.clear() Method
This method, when invoked clears the entire storage of all records for that domain. It does not receive any parameters.
sessionStorage.clear();
sessionStorage.key() Method
The key() method comes in handy in situations where you need to loop through keys and allows you pass a number or index to local storage to retrieve the name of the key.
var KeyName = sessionStorage.key(index);
Free Spring Boot Tutorial | Full In-depth Course | Learn Spring Boot in 10 Hours
Watch this course on YouTube at Spring Boot Tutorial | Fee 10 Hours Full Course