Demonstrating Session Storage
Example: The following example demonstrates session storage
HTML
<!DOCTYPE html> < html > < head > < title >Session Storage Example</ title > </ head > < body > < h1 >Session Storage Example</ h1 > < button onclick = "setSessionData()" >Set Session Data</ button > < button onclick = "getSessionData()" >Get Session Data</ button > < button onclick = "clearSessionData()" >Clear Session Data</ button > < button onclick = "getSessionLength()" >Get Session Length</ button > < button onclick = "getSessionKey(1)" >Get Session Data by Index</ button > < div id = "output" ></ div > < script > // Function to set data in Session Storage function setSessionData() { sessionStorage.setItem("username", "JohnDoe"); sessionStorage.setItem("preferences", JSON.stringify({ theme: "dark", lang: "en" })); } // Function to retrieve data from Session Storage function getSessionData() { var username = sessionStorage.getItem("username"); var preferences = JSON.parse(sessionStorage.getItem("preferences")); document.getElementById("output").textContent = "Username: " + username + ", Preferences: " + JSON.stringify(preferences); } // Function to clear all data from Session Storage function clearSessionData() { sessionStorage.clear(); document.getElementById("output") .textContent = "Session Storage data cleared."; } // Function to get the length of Session Storage function getSessionLength() { var length = sessionStorage.length; document.getElementById("output").textContent = "Session Storage length: " + length; } // Function to get Session Storage data by index function getSessionKey(index) { var key = sessionStorage.key(index); var value = sessionStorage.getItem(key); document.getElementById("output").textContent = "Key at index " + index + ": " + key + ", Value: " + value; } </ script > </ body > </ html > |
Output: In the left side of the screen, we are clicking on buttons which adds the data , modifies the data in sessionstorage and in the right side under application tab, we can see how this sessionstorage is getting modified.
How to save data in session and local storage ?
SessionStorage and LocalStorage are the two most important ways to store data in the browser. SessionStorage is the temporary storage that web applications use to store data, whereas LocalStorage is the persistent storage that websites use to manage our data. These storages reside in the browser’s memory.
Apart from these storage browser also stores information in Cookies. A Cookie is just some textual information about website. Cookies help to make the browsing experience better. Cookies are website specific and hold the information of frequently visited websites
Table of Content
- Steps to open Session Storage and Local Storage
- Memory Capacity
- Features of Session Storage
- When to use Session Storage?
- Methods of Session Storage object
- Demonstrating Session Storage
- Features of Local Storage
- When to use LocalStorage?
- Methods of Local Storage object
- Demonstrating Local Storage Object
Contact Us