Monday 16 September 2013

Store data on client side using jquery data



Here I use jquery data to store data on client side. In this I create an object to store value from inputs and save it using jquery data and later display this data on a div.
JqueryData.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryData.aspx.cs" Inherits="JqueryData" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#setData').click(function () {
                var person = new Object();
                person.firstname = $('#firstname').val();
                person.lastname = $('#lastname').val();
                person.age = $('#age').val();
                person.eyecolor = $('#eyecolor').val();

                $(document).data('person', person);
             
                $('#message').html('Data saved');
            });

            $('#getData').click(function () {

                var person = $(document).data('person');
                if (jQuery.hasData(document)) {
                    $('#result').html('');
                    $('#message').html('Information saved');
                    $('#result').append('<br/>First Name: ' + person.firstname);
                    $('#result').append('<br/>Last Name: ' + person.lastname);
                    $('#result').append('<br/>Age:      : ' + person.age);
                    $('#result').append('<br/>Eye Color: ' + person.eyecolor);
                }
                else
                {
                    $('#message').html('No data saved');
                }
            });

            $('#removedData').click(function () {
                $(document).removeData('person');
                $('#message').html('Data Removed');
                $('#result').html('');
            });
        });
    
      

    </script>
    <style type="text/css">
        span
        {
            display: inline-block;
            width: 260px;
            padding: 2px;
        }

        a
        {
            text-decoration: none;
            padding: 2px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div align="center">
        <div style="width: 265px;">
            <span>
                 First name: <input type="text" id="firstname" />
            </span>
            <span>
                 Last name: <input type="text" id="lastname" />
            </span>
            <span>
                Enter Age: <input type="text" id="age" />
            </span>
            <span>
                Enter Eye Color: <input type="text" id="eyecolor" />
            </span>
        </div>
        <a id="setData" href="javascript:void(0)" >Set Data</a>
        <a id="getData" href="javascript:void(0)">Get Data</a>
        <a id="removedData" href="javascript:void(0)">Removed Data</a>
         <div id="message">

        </div>
        <div id="result">

        </div>
      
    </div>
    </form>
</body>
</html>