Home > DeveloperSection > Articles > Storing data on Client in HTML5

Storing data on Client in HTML5


HTML5 HTML5 
Ratings:
0 Comment(s)
 5163  View(s)
Rate this:

Storing data on Client in HTML5

In other version of HTML we store data on client machine by using concept of cookies which is not suitable for large data. With the concept of localStorage we will store large volume of data on client machine. Html5 offers two ways to store data on client machine.

1.       localStorage: When we stores data on client using LocalStorage mechanism then there is no time limit to lost data. We are able to see that data after one day, or one month or one year.

2.       sessionStorage: When we store data on client using sessionStorage mechanism then saved datas are available until sessions are expire.

Following example will be displayed use of localStorage object.

Design a user interface for application by using following code snippet.

<table>

        <tr>

            <td>

                <div id="div1">

                    <textarea id="txtSubmitContent" style="width:200px;height:200px" rows="16" ></textarea> <br />

                    <input type="button" value="Save Content In LocalStorage" onclick="storeData()" />

                </div>

            </td>

            <td>

                <div id="div2">

                    <textarea id="txtGetContent" style="width:200px;height:200px" rows="16"></textarea> <br />

                    <input type="button" value="Get Content From LocalStorage" onclick="getData()" />

                </div>

            </td>

        </tr>

</table>

This will create a user interface which looks like following.

Storing data on Client in HTML5

Storing data on Client in HTML5

Create a java script method named storeData() and called this method on click event of Save Content in LocalStorage button.

function storeData() {

            localStorage.data = txtSubmitContent.value;

}

This method will store data on client system.

Create a java script method named getData() which will display data on second text box. This will display storage data.

function getData() {

            txtGetContent.value = "";

            if (localStorage.data)

                txtGetContent.value = localStorage.data;

            else

                txtGetContent.value="No Local Data Found."

}

Output of following code snippet is as follows

Storing data on Client in HTML5

Following example will be displayed use of sessionStorage object

Here we will see that session storage will save data until session of users get expired. Replace all localStorage value with sessionStorage value and execute program to see output.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE HTML>

<html>

<head>

<title>Html5 Learning</title>

    <script type="text/javascript">

        function storeData() {

            sessionStorage.data = txtSubmitContent.value;

        }

 

        function getData() {

            txtGetContent.value = "";

            if (sessionStorage.data)

                txtGetContent.value = sessionStorage.data;

            else

                txtGetContent.value = "No Local Data Found."

        }

    </script>

</head>

<body>

    <table>

        <tr>

            <td>

                <div id="div1">

                    <textarea id="txtSubmitContent" style="width:200px;height:200px" rows="16" ></textarea> <br />

                    <input type="button" value="Save Content In SessionStorage" onclick="storeData()" />

                </div>

            </td>

            <td>

                <div id="div2">

                    <textarea id="txtGetContent" style="width:200px;height:200px" rows="16"></textarea> <br />

                    <input type="button" value="Get Content From SessionStorage" onclick="getData()" />

                </div>

            </td>

        </tr>

    </table>

</body>

</html>

 

Output of following code snippet is as follows

Storing data on Client in HTML5

 


Don't want to miss updates? Please click the below button!

Follow MindStick