<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery handleStorage Plugin Demo</title>
<!-- this stylesheet was ripped from an article on net tuts -->
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<!-- Load the jQuery libraries -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<!-- Load the cookie libraries -->
<script src="3rd-party/jquery-cookie/jquery.cookie.js"></script>
<!-- Load the Gibberish-AES libraries -->
<script src="3rd-party/gibberish-aes/src/gibberish-aes.min.js"></script>
<!-- Load the jQuery handleStorage plugin -->
<script src="jquery.handleStorage.js"></script>
</head>
<body>
<div style="width:70%; word-wrap:break-word">
<h2><strong>jQuery handleStorage plug-in demo's</strong></h2>
<p style="text-align:center">
<blockquote>
When working with mobile web page styling I have found the need to use input
forms and the keyboard interface associated with that on several mobile devices
to be somewhat lacking. This plug-in should help your visitors when dealing
with management of form data using HTML5 (or falling back to cookie) localStorage,
sessionStorage support. Also supports AES-CBC-256 encryption using the
Gibberish-AES encryption library.
</blockquote>
</p>
<!-- example using default options -->
<script>
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('#default').handleStorage();
});
</script>
<div id="contact-form" class="clearfix">
<h3>Example using HTML5 localStorage</h3>
<p>The default use is simple and uses persistent storage by implementing the HTML5 localStorage option</p>
<form id="default" name="default" method="post" action="">
<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" />
<label for="email">Email Address: <span class="required">*</span></label>
<input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required="required" />
<label for="options">Reason: <span class="required">*</span></label>
<select id="options" name="options" required="required">
<option value="support">Support</option>
<option value="sales">Sales</option>
<option value="other">Other</option>
</select>
<label for="catagory">Information: <span class="required">*</span></label>
<hr/>
Design: <input type="checkbox" id="catagory" name="catagory" value="design"><br/>
Development: <input type="checkbox" id="catagory" name="catagory" value="development"><br/>
Misc: <input type="checkbox" id="catagory" name="catagory" value="misc"><br/>
<label for="reason">Reason: <span class="required">*</span></label>
<hr/>
Old design: <input type="radio" id="reason" name="reason" value="old_design"><br/>
Old code: <input type="radio" id="reason" name="reason" value="old_code"><br/>
Hell of it: <input type="radio" id="reason" name="reason" value="hell_of_it"><br/>
<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
<span id="loading"></span>
<input type="submit" value="Save to localStorage & submit" id="submit-button" />
<p id="req-field-desc"></p>
</form>
</div>
<!-- example using sessionStorage -->
<script>
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('#sessions').handleStorage({storage:'sessionStorage'});
});
</script>
<div id="contact-form" class="clearfix">
<h3>Example using HTML5 sessionStorage</h3>
<p>Using sessionStorage allows for persistent client storage ONLY while the users browser is open</p>
<form id="sessions" name="sessions" method="post" action="">
<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" />
<label for="email">Email Address: <span class="required">*</span></label>
<input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required="required" />
<label for="options">Reason: <span class="required">*</span></label>
<select id="options" name="options" required="required">
<option value="support">Support</option>
<option value="sales">Sales</option>
<option value="other">Other</option>
</select>
<label for="catagory">Information: <span class="required">*</span></label>
<hr/>
Design: <input type="checkbox" id="catagory" name="catagory" value="design"><br/>
Development: <input type="checkbox" id="catagory" name="catagory" value="development"><br/>
Misc: <input type="checkbox" id="catagory" name="catagory" value="misc"><br/>
<label for="reason">Reason: <span class="required">*</span></label>
<hr/>
Old design: <input type="radio" id="reason" name="reason" value="old_design"><br/>
Old code: <input type="radio" id="reason" name="reason" value="old_code"><br/>
Hell of it: <input type="radio" id="reason" name="reason" value="hell_of_it"><br/>
<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
<span id="loading"></span>
<input type="submit" value="Save to sessionStorage & submit" id="submit-button" />
<p id="req-field-desc"></p>
</form>
</div>
<!-- example using cookies -->
<script>
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('#cookies').handleStorage({storage:'cookies'});
});
</script>
<div id="contact-form" class="clearfix">
<h3>Example using cookies (for non-HTML5 compliant browsers, auto-fallback)</h3>
<p>For those users that are still using older browsers option cookie storage is available but requires the jquery cookie plugin (see above for URL)</p>
<form id="cookies" name="cookies" method="post" action="">
<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" />
<label for="email">Email Address: <span class="required">*</span></label>
<input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required="required" />
<label for="options">Reason: <span class="required">*</span></label>
<select id="options" name="options" required="required">
<option value="support">Support</option>
<option value="sales">Sales</option>
<option value="other">Other</option>
</select>
<label for="catagory">Information: <span class="required">*</span></label>
<hr/>
Design: <input type="checkbox" id="catagory" name="catagory" value="design"><br/>
Development: <input type="checkbox" id="catagory" name="catagory" value="development"><br/>
Misc: <input type="checkbox" id="catagory" name="catagory" value="misc"><br/>
<label for="reason">Reason: <span class="required">*</span></label>
<hr/>
Old design: <input type="radio" id="reason" name="reason" value="old_design"><br/>
Old code: <input type="radio" id="reason" name="reason" value="old_code"><br/>
Hell of it: <input type="radio" id="reason" name="reason" value="hell_of_it"><br/>
<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
<span id="loading"></span>
<input type="submit" value="Save to cookie & submit" id="submit-button" />
<p id="req-field-desc"></p>
</form>
</div>
<!-- example using AES encrypted localStorage -->
<script>
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('#default-aes').handleStorage({aes:true});
});
</script>
<div id="contact-form" class="clearfix">
<h3>Example using HTML5 localStorage with AES encryption</h3>
<p>If you wish to use persistent storage and provide some additional security to the saved form data a transparent AES-CBC encryption method is available. This option does require the Gibberish-AES plug-in as noted above.</p>
<form id="default-aes" name="default-aes" method="post" action="">
<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" />
<label for="email">Email Address: <span class="required">*</span></label>
<input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required="required" />
<label for="options">Reason: <span class="required">*</span></label>
<select id="options" name="options" required="required">
<option value="support">Support</option>
<option value="sales">Sales</option>
<option value="other">Other</option>
</select>
<label for="catagory">Information: <span class="required">*</span></label>
<hr/>
Design: <input type="checkbox" id="catagory" name="catagory" value="design"><br/>
Development: <input type="checkbox" id="catagory" name="catagory" value="development"><br/>
Misc: <input type="checkbox" id="catagory" name="catagory" value="misc"><br/>
<label for="reason">Reason: <span class="required">*</span></label>
<hr/>
Old design: <input type="radio" id="reason" name="reason" value="old_design"><br/>
Old code: <input type="radio" id="reason" name="reason" value="old_code"><br/>
Hell of it: <input type="radio" id="reason" name="reason" value="hell_of_it"><br/>
<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
<span id="loading"></span>
<input type="submit" value="Encrypt, save to localStorage & submit" id="submit-button" />
<p id="req-field-desc"></p>
</form>
</div>
<!-- example using AES encrypted sessionStorage -->
<script>
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('#sessions-aes').handleStorage({storage:'sessionStorage',aes:true});
});
</script>
<div id="contact-form" class="clearfix">
<h3>Example using HTML5 sessionStorage with AES encryption</h3>
<p>This example provides the best security of client storage data as the client closes their browser the data gets reset and while the users browser is open the data is encrypted with the AES-CBC cipher</p>
<form id="sessions-aes" name="sessions-aes" method="post" action="">
<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" />
<label for="email">Email Address: <span class="required">*</span></label>
<input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required="required" />
<label for="options">Reason: <span class="required">*</span></label>
<select id="options" name="options" required="required">
<option value="support">Support</option>
<option value="sales">Sales</option>
<option value="other">Other</option>
</select>
<label for="catagory">Information: <span class="required">*</span></label>
<hr/>
Design: <input type="checkbox" id="catagory" name="catagory" value="design"><br/>
Development: <input type="checkbox" id="catagory" name="catagory" value="development"><br/>
Misc: <input type="checkbox" id="catagory" name="catagory" value="misc"><br/>
<label for="reason">Reason: <span class="required">*</span></label>
<hr/>
Old design: <input type="radio" id="reason" name="reason" value="old_design"><br/>
Old code: <input type="radio" id="reason" name="reason" value="old_code"><br/>
Hell of it: <input type="radio" id="reason" name="reason" value="hell_of_it"><br/>
<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
<span id="loading"></span>
<input type="submit" value="Encrypt, save to sessionStorage & submit" id="submit-button" />
<p id="req-field-desc"></p>
</form>
</div>
<!-- example using AES encrypted localStorage -->
<script>
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('#cookies-aes').handleStorage({storage:'cookies',aes:true});
});
</script>
<div id="contact-form" class="clearfix">
<h3>Example using cookies with AES encryption</h3>
<p>An example using AES-CBC encryption with degraded cookie support.</p>
<form id="cookies-aes" name="cookies-aes" method="post" action="">
<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" />
<label for="email">Email Address: <span class="required">*</span></label>
<input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required="required" />
<label for="options">Reason: <span class="required">*</span></label>
<select id="options" name="options" required="required">
<option value="support">Support</option>
<option value="sales">Sales</option>
<option value="other">Other</option>
</select>
<label for="catagory">Information: <span class="required">*</span></label>
<hr/>
Design: <input type="checkbox" id="catagory" name="catagory" value="design"><br/>
Development: <input type="checkbox" id="catagory" name="catagory" value="development"><br/>
Misc: <input type="checkbox" id="catagory" name="catagory" value="misc"><br/>
<label for="reason">Reason: <span class="required">*</span></label>
<hr/>
Old design: <input type="radio" id="reason" name="reason" value="old_design"><br/>
Old code: <input type="radio" id="reason" name="reason" value="old_code"><br/>
Hell of it: <input type="radio" id="reason" name="reason" value="hell_of_it"><br/>
<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
<span id="loading"></span>
<input type="submit" value="Encrypt, save to cookie & submit" id="submit-button" />
<p id="req-field-desc"></p>
</form>
</div>
<!-- default options with success callback -->
<script>
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('#default-success').handleStorage({callback:function(){$j('#default-success').append('Form data saved successfully');}});
});
</script>
<div id="contact-form" class="clearfix">
<h3>Example using defaults with success callback function</h3>
<p>You may wish to alert the user that form data was saved or even call an AJAX style function of syncing data to a remote server</p>
<form id="default-success" name="default-success" method="post" action="">
<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" />
<label for="email">Email Address: <span class="required">*</span></label>
<input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required="required" />
<label for="options">Reason: <span class="required">*</span></label>
<select id="options" name="options" required="required">
<option value="support">Support</option>
<option value="sales">Sales</option>
<option value="other">Other</option>
</select>
<label for="catagory">Information: <span class="required">*</span></label>
<hr/>
Design: <input type="checkbox" id="catagory" name="catagory" value="design"><br/>
Development: <input type="checkbox" id="catagory" name="catagory" value="development"><br/>
Misc: <input type="checkbox" id="catagory" name="catagory" value="misc"><br/>
<label for="reason">Reason: <span class="required">*</span></label>
<hr/>
Old design: <input type="radio" id="reason" name="reason" value="old_design"><br/>
Old code: <input type="radio" id="reason" name="reason" value="old_code"><br/>
Hell of it: <input type="radio" id="reason" name="reason" value="hell_of_it"><br/>
<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
<span id="loading"></span>
<input type="submit" value="Save & callback function on success" id="submit-button" />
<p id="req-field-desc"></p>
</form>
</div>
<!-- default options with pre save callback -->
<script>
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('#default-pre').handleStorage({preCallback:function(){$j('#default-pre').append('Executing prior to form save');}});
});
</script>
<div id="contact-form" class="clearfix">
<h3>Example using defaults with pre-save callback function</h3>
<p>This example could be used to load simple spinner or other message alerting the user form data is about to be saved</p>
<form id="default-pre" name="default-pre" method="post" action="">
<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" />
<label for="email">Email Address: <span class="required">*</span></label>
<input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required="required" />
<label for="options">Reason: <span class="required">*</span></label>
<select id="options" name="options" required="required">
<option value="support">Support</option>
<option value="sales">Sales</option>
<option value="other">Other</option>
</select>
<label for="catagory">Information: <span class="required">*</span></label>
<hr/>
Design: <input type="checkbox" id="catagory" name="catagory" value="design"><br/>
Development: <input type="checkbox" id="catagory" name="catagory" value="development"><br/>
Misc: <input type="checkbox" id="catagory" name="catagory" value="misc"><br/>
<label for="reason">Reason: <span class="required">*</span></label>
<hr/>
Old design: <input type="radio" id="reason" name="reason" value="old_design"><br/>
Old code: <input type="radio" id="reason" name="reason" value="old_code"><br/>
Hell of it: <input type="radio" id="reason" name="reason" value="hell_of_it"><br/>
<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
<span id="loading"></span>
<input type="submit" value="Execute callback & save form" id="submit-button" />
<p id="req-field-desc"></p>
</form>
</div>
<!-- default options with on error callback -->
<script>
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('#default-error').handleStorage({errCallback:function(){$j('#default-error').append('An error occured during save, this should not happen');}});
});
</script>
<div id="contact-form" class="clearfix">
<h3>Example using defaults with an on error callback function</h3>
<p>Here we anticipate problems with auto-form saves by executing a callback to handle and alert the user there was a problem. This should never happen but then again neither should movies about troll hunting.</p>
<form id="default-error" name="default-error" method="post" action="">
<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" />
<label for="email">Email Address: <span class="required">*</span></label>
<input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required="required" />
<label for="options">Reason: <span class="required">*</span></label>
<select id="options" name="options" required="required">
<option value="support">Support</option>
<option value="sales">Sales</option>
<option value="other">Other</option>
</select>
<label for="catagory">Information: <span class="required">*</span></label>
<hr/>
Design: <input type="checkbox" id="catagory" name="catagory" value="design"><br/>
Development: <input type="checkbox" id="catagory" name="catagory" value="development"><br/>
Misc: <input type="checkbox" id="catagory" name="catagory" value="misc"><br/>
<label for="reason">Reason: <span class="required">*</span></label>
<hr/>
Old design: <input type="radio" id="reason" name="reason" value="old_design"><br/>
Old code: <input type="radio" id="reason" name="reason" value="old_code"><br/>
Hell of it: <input type="radio" id="reason" name="reason" value="hell_of_it"><br/>
<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
<span id="loading"></span>
<input type="submit" value="Encrypt, save to cookie & submit" id="submit-button" />
<p id="req-field-desc"></p>
</form>
</div>
</div>
</body>
</html>
|
Download
