Icontem

File: example.html

Recommend this page to a friend!
  Classes of Jason Gerfen  >  jQuery.handleStorage  >  example.html  >  Download  
File: example.html
Role: Example script
Content type: text/plain
Description: Auxiliary data
Class: jQuery.handleStorage
Save forms in cookies, local or session storage
Author: By
Last change: Tue Sep 4 03:37:47 MDT 2012 - Migrated 3rd party library's into submodules for easier use
Mon Sep 3 19:33:37 MDT 2012 - Problem with key on encrypting form elements and array of radio or checkbox elements
Mon Sep 3 18:38:55 MDT 2012 - Working on resolving a bug within the form selector when multiple forms using the same storage key and adding support for radio and checkboxes
Date: 5 years ago
Size: 22,278 bytes
 

Contents

Class file image Download
<!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>