JavaScript sessionStorage - GeeksforGeeks
source link: https://www.geeksforgeeks.org/javascript-sessionstorage/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
JavaScript sessionStorage
JavaScript sessionStorage is a web storage technique that allows you to store data in a web browser. You can manually set and retrieve the values from it using some methods. The sessionStorage stores the data for a short amount of time until the browser tab or window gets closed. The data stored in sessionStorage will only be accessible in the current tab not in the other tabs.
Syntax:
window.sessionStorage;
There are some methods associated with the sessionStorage as described below:
- setItem(key, value): It sets the data in the sessionStorage with the passed key and value.
- getItem(key): This method will return the value of the key passed to it, if it is stored in the storage.
- removeItem(key): It will remove the passed key with its value from the storage.
- storage.length: It returns the total number of stored items in the storage.
- key(index): It returns the key stored at the passed index.
- clear(): It will clear all the stored items.
Example: The below code example will set, retrieve, and remove items from the sessionStorage.
- Javascript
const setBtn = document.getElementById('setBtn');const getBtn = document.getElementById('getBtn');const removeBtn = document.getElementById('removeBtn');const result = document.getElementById('result');function setItemHandler(){sessionStorage.clear();const nameInpText = document.getElementById('nameInp').value;const emailInpText = document.getElementById('emailInp').value;if(emailInpText && nameInpText){sessionStorage.setItem(nameInpText, emailInpText);result.innerHTML = " ";}else{result.innerHTML = `<b style='color: red'>Input fields can not be empty!</b>`;}}function getItemHandler(){const nameInpText = document.getElementById('nameInp').value;const emailInpText = document.getElementById('emailInp').value;if(emailInpText && nameInpText){result.innerHTML = `<b style='color: green'>Stored Item: ${sessionStorage.getItem(nameInpText)}</b>`;}else{result.innerHTML = `<b style='color: red'>No item is stored in storage!</b>`;}}function removeItemHandler(){const nameInpText = document.getElementById('nameInp').value;sessionStorage.removeItem(nameInpText);console.log(sessionStorage.removeItem(nameInpText));if(sessionStorage.removeItem(nameInpText) === undefined){result.innerHTML = `<b style='color: green'>Item is removed Successfully!!</b>`;}else{result.innerHTML = `<b style='color: red'>An Error Occured, can not remove item!!</b>`;}}setBtn.addEventListener('click', setItemHandler)getBtn.addEventListener('click', getItemHandler)removeBtn.addEventListener('click', removeItemHandler) |
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!
Looking for a place to share your ideas, learn, and connect? Our Community portal is just the spot! Come join us and see what all the buzz is about!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK