Examples Showing of Web Storage API
1. Using sessionStprage setItem Method:
Example: In this example, we will store the data using the sessionStorage setItem method and retrieve them using the sessionStorage getItem method.
HTML
<!DOCTYPE html><html><head> <title>Session storage</title></head><body> <center> <h1 style="color:green">Welcome To GFG</h1> <h2>Geeks details From session Storage</h2> <h2 id="ele"></h2> </center> <script> sessionStorage.setItem('name', 'Arvind Kumar') sessionStorage.setItem('Course', 'Mtech'); sessionStorage.setItem('Age', 23); sessionStorage.setItem('Batch', '3rd'); document.getElementById("ele").innerHTML = '<h3>Name: ' + sessionStorage.getItem("name") + '</h3><h3>Course: ' + sessionStorage.getItem('Course') + '</h3>' + '<h3> Batch: ' + sessionStorage.getItem('Batch') + '</h3>' + '<h3>Age: ' + sessionStorage.getItem('Age') + '</h3>'; </script></body></html |
Output:
session1
Output of session Storage file:
sessionStorage
2. Using localStorage setItem Method:
Example: In this example we will store the data using localStorage setItem and retrieve them using getItem method.
HTML
<!DOCTYPE html><html><head> <title>local storage</title></head><body> <center> <h1 style="color:green">Welcome To GFG</h1> <p> <label>Username : <input id="name" /></label> </p> <p> <label>Password : <input id="password" /></label> </p> <p> <button onclick="fun()">Submit</button> </p> <p> <button onclick="fun2()">Get details</button> </p> <h2 id="ele"></h2> </center> <script> function fun() { localStorage.setItem('name', document.getElementById('name').value) localStorage.setItem('password', document.getElementById('password').value); } function fun2() { document.getElementById("ele").innerHTML = '<h3>name: ' + localStorage.getItem("name") + '</h3><h3>Passward: ' + localStorage.getItem('password') + '</h3>'; } </script></body></html> |
Output:
local2
Output of local storage:
In summary, the Web Storage API simplifies data storage and retrieval, making it a valuable tool for web developers. Remember to use it wisely and consider the storage limits and security implications.
Supported Browsers:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Web Storage API
Web API Storage facilitates the feature of storing data within the browser on the client side. It is also referred to as web storage. It uses a key-value pair format to store the data.
Table of Content
- Web Storage API Concepts and Usage
- Web Storage API Interfaces
- Examples Showing of Web Storage API
Contact Us