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>
