Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Storing and Retrieve Value Using Session Storage in HTML5

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 117
    Comment on it

    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 sessionStorage without affecting the performance of the web browser. Using sessionStorage, 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:-

    1.jpg

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: