Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Web Storage in HTML5

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 352
    Comment on it

    There are two storage session storage and local storage in the new web storage API in html5.

    HTML local storage contains two objects for storing data on the browser:

    window.localStorage - stores data with no expiration date
    window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)
    

    Local Storage:

    localStorage can be used to store data of the page that uses a local storage variable. It can be accessed whenever the user opens window as it has no time limits. It can store data with the browser.

    Example:

    <!DOCTYPE html>
    <html>
    <body>
    
    <div id="result"></div>
    
    <script>
    // Check browser support
    if (typeof(Storage) !== "undefined") {
        // Store
        localStorage.setItem("lastname", "Smith");
        // Retrieve
        document.getElementById("result").innerHTML = localStorage.getItem("lastname");
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
    }
    </script>
    
    </body>
    </html>
    

    Session Storage:

    The sessionStorage object works same as localStorage object but the difference is that it stores the data for only one session. When the browser tab is closed, the data is deleted.

    Example:

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function countSession() {
        if(typeof(Storage) !== "undefined") {
            if (sessionStorage.clickcount) {
                sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
            } else {
                sessionStorage.clickcount = 1;
            }
            document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
        } else {
            document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
        }
    }
    </script>
    </head>
    <body>
    <p><button onclick="countSession()" type="button">Click me!</button></p>
    <div id="result"></div>
    <p>Click the button to see the counter increase.</p>
    <p>Close the browser tab (or window), and try again, and the counter is reset.</p>
    </body>
    </html>
    

 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: