-
Storing and Retrieve Value Using Session Storage in HTML5
over 7 years ago
Hello Everyone!!
In this blog, we are going to know about the Session storage in HTML5. As we know that web can store the data locally with in the browser. We can store the data using
sessionStoragewithout affecting the performance of the web browser. UsingsessionStorage,we can store the large amount of the data depending on the different browser's properties. It stores the data of session till session's termination, after closing the session, data will deleted from the browser. It is valid for one transaction only.It is similar to the HTTP cookies. It is used for the storing data to the client side and fetching the value from the session. It stores in Key/Value pairs( like in HTTP cookies) and we can fetch the value from the session easily. Websites stores data into the session at the different areas, so it can easily fetch their data from the session.
The Session Storage basically consists of 4 main methods.
- setItem(key, value):- This is used to set the value in the sessionStorage.
- getItem(key):- It is used to get the value which is in the session.
- removeItem(key):- It is used to remove the item from the session.
- clear():- This method is used to clear the session.
Step-1:- HTML 5 used javaScript to store and access the data.
<script type="text/javascript"> function dofirst() { var button = document.getElementById("button"); button.addEventListener("click",savecrap,false); } function savecrap() { var one=document.getElementById("one").value; var two=document.getElementById("two").value; sessionStorage.setItem(one,two); display(one); } function display(one) { var rightbox=document.getElementById("rightbox"); var two=sessionStorage.getItem(one); rightbox.innerHTML="Name of variable:" +one+"<br/> value:" +two; } window.addEventListener("load",dofirst,false); </script>Step 2:- CSS
<style type="text/css"> #one { width: 240px; background-color: #CCCCCC; font-family: Arial, Helvetica, sans-serif; font-size: large; color: #FF0000; } #two { width: 222px; font-family: Arial, Helvetica, sans-serif; font-size: medium; color: #FF0000; background-color: #CCCCCC; } #button { width: 116px; height: 39px; } #rightbox { width: 222px; height:200px; border: solid 2; font-family: Arial, Helvetica, sans-serif; font-size: medium; color: #FF0000; background-color: #CCCCCC; } </style>Step 3:-
<body> <section ud="leftbox"> <form> <p>(key) One: <input type="text" id="one"</p> <p>(value) Two: <textarea id="two"> </textarea></p> <p> <input type="button" id="button" value="save" /></p> </form> </section> <section id="rightbox"> Nothing Yet Hoss! </section> </body>Output:-
0 Comment(s)