jQuery.handleStorage: Save forms in cookies, local or session storage

Recommend this page to a friend!
  Info   View files View files (5)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 459 All time: 71 This week: 4Up
Version License JavaScript version Categories
handle-storage 0.3GNU General Publi...1.0HTML, Databases, jQuery, Forms
Description Author

This object is a jQuery plug-in that can save form data in cookies, local or session storage.

It can take the values of a given form input and save them in several types of storage containers.

Currently it supports session storage, local storage and cookies for non-HTML 5 compliant browsers.

It supports encrypting the saved form data with AES encryption.

The plug-in can also load previously saved values from the container.

Picture of Jason Gerfen
  Performance   Level  
Name: Jason Gerfen <contact>
Classes: 7 packages by
Country: United States United States
Age: 47
All time rank: 122 in United States United States
Week rank: 6 Up2 in United States United States Equal
Innovation award
Innovation award
Nominee: 4x

Winner: 2x

Details
# Depreciated, succeeded by [secStore.js](https://github.com/jas-/secStore.js) #jQuery plugin to impliment HTML5 form storage Supports HTML5 localStorage, sessionStorage or cookie support for older browsers. Optional AES encryption support. Optional degraded cookie support (with plug-in, see *requirements). Now supports auto-save for form elements to prevent loss of work prior to form submission. Fork me @ https://www.github.com/jas-/jQuery.handleStorage ## REQUIREMENTS: * jQuery libraries (required - http://www.jquery.com) * jQuery cookie plugin (optional - http://plugins.jquery.com/files/jquery.cookie.js.txt) * Gibberish-AES libraries (optional - https://github.com/mdp/gibberish-aes) ## FEATURES: * HTML5 localStorage support * HTML5 sessionStorage support * Cookie support * AES encryption support * Quota support (4k for cookies and 5mb for HTML5 mechanisms) ## OPTIONS: * appID: Unique application identifier * interval: Auto-save interval (default is 5sec) * storage: HTML5 localStorage, sessionStorage and cookies supported * aes: Use AES encryption for client storage objects * callback: Executes a callback function on success saves * preCallback: Executes a callback function prior to any saves * errCallback: Executes a callback function when any save was unsuccessful ## NOTES: A quick note on security. Currently (02.17.2012), a cross-domain bypass proof of concept vulnerability exists. Reference: http://www.securityfocus.com/bid/51765/discuss To help protect sensitive data employing the optional AES feature will assist in protecting the client storage information, moreover, local browser compromises exist when two people use the same machine. If you would like to provide the more secure method of saving form data the use of the 'sessionStorage' option will provide a 'per session' method of auto-saving to the client storage mechanisms. Additionally the use of the optional AES encryption feature will provide transparent encryption of the auto-saving features this plug-in provides. ## EXAMPLES: ### localStorage examples: The localStorage option within HTML5 allows for persistent client storage of key/value pairs. This is the default method of client storage. #### Default usage using HTML5 localStorage The default use is simple and users persistent storage by implementing the HTML5 localStorage option ```javascript $('#form').handleStorage(); ``` #### Default usage using HTML5 localStorage with custom appID By specifying the appID variable you can separate multiple forms as the default use will combine all forms into sub-objects of the default appID ```javascript $('#form').handleStorage({appID:'myWickedApp'}); ``` #### Default usage using HTML5 localStorage with custom auto-save interval You have the option of specifying the interval of the auto-save feature. Currently the default is 5 seconds. In this example we specify 30 seconds. ```javascript $('#form').handleStorage({interval:30000}); ``` #### Default usage using HTML5 localStorage with AES encryption 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. ```javascript $('#form').handleStorage({aes:true}); ``` ### sessionStorage examples: Specifying the sessionStorage option allows for client storage of form data ONLY while the users browser is open. This is the more secure option in terms of a web application which requires authentication. #### Default usage using HTML5 sessionStorage An example of using the sessionStorage HTML5 option ```javascript $('#form').handleStorage({storage:'sessionStorage'}); ``` #### Default usage using HTML5 sessionStorage with custom appID Here is an example of specifying the sessionStorage option with a custom appID for client storage. ```javascript $('#form').handleStorage({storage:'sessionStorage',appID:'myWickedApp'}); ``` #### Default usage using HTML5 sessionStorage with custom auto-save interval You have the option of specifying the interval of the auto-save feature. Currently the default is 5 seconds. In this example we specify 30 seconds. ```javascript $('#form').handleStorage({storage:'sessionStorage',interval:30000}); ``` #### Default usage using HTML5 sessionStorage with AES encryption 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 ```javascript $('#form').handleStorage({storage:'sessionStorage',aes:true}); ``` ### cookie storage examples: #### Default usage using cookies for client storage For those users that are still using older browsers option cookie storage is available but requires the jquery cookie plugin (see above for URL) ```javascript $('#form').handleStorage({storage:'cookies'}); ``` #### Default usage using cookies for client storage with custom appID An example using cookies with a custom appID (good for multiple forms if you wish to segregate the storage objects) ```javascript $('#form').handleStorage({storage:'cookies',appID:'myWickedApp'}); ``` #### Default usage using cookies with custom auto-save interval You have the option of specifying the interval of the auto-save feature. Currently the default is 5 seconds. In this example we specify 30 seconds. ```javascript $('#form').handleStorage({storage:'cookies',interval:30000}); ``` #### Default usage using cookies for client storage with AES encryption An example using AES-CBC encryption with degraded cookie support. ```javascript $('#form').handleStorage({storage:'cookies',aes:true}); ``` ### Using callback options Because responsive UI's are all the rage I have added a couple of callback options to help you provide this to your clients. #### Pre-Callback example Here is an example of executing a function before the auto-incrementing or form submit event has been called. ```javascript $('#form').handleStorage({preCallback:function(){ console.log(this); }}); ``` #### Callback example This callback gets executed anytime the save has been called and was successful. Keep in mind that this does take place ever 5 seconds with a default configuration. ```javascript $('#form').handleStorage({callback:function(){ console.log(this); }}); ``` #### errCallback example This callback gets executed anytime a save was unsuccessful. ```javascript $('#form').handleStorage({errCallback:function(){ console.log(this); }}); ``` ## OBJECT DETAILS Here is an example of the contents of the object within any specified storage mechanism. As you can see it is a valid JSON object that is formatted for readability. Multiple forms can be stored within one object as shown here. (Which is the default method of storing form data). ``` "jQuery.handleStorage": { "default": { "uuid": "cb76ax8d-6539-4151-a70d-ed0628c083d5", "name": "jason gerfen", "email": "jason.gerfen@gmail.com", "message": "Test #1" }, "default-aes": { "uuid": "cb76ax8d-6539-4151-a70d-ed0628c083d5", "name": "U2FsdGVkX1+J6IKgOD4E/Ni/VqnNf/FwZwaHotk4Gfc=", "email": "U2FsdGVkX19xzInZdszNewMDlKOVZzDraUkhT2VCjtIfqgaZNYhzkKWUciUn0lCc", "message": "U2FsdGVkX1+s0SczDn9TOP9FSpBvJCqVpbL9wyniQcs=" } } ``` Or if you would like to separate objects based on forms (done by specifying a separate 'appID' per form), this is what it would look like in the storage mechanism. ``` "jQuery.handleStorage": { "default": { "uuid": "cb76ax8d-6539-4151-a70d-ed0628c083d5", "name": "jason gerfen", "email": "jason.gerfen@gmail.com", "message": "Test #1" } } "myWickedApp": { "default-aes": { "uuid": "cb76ax8d-6539-4151-a70d-ed0628c083d5", "name": "U2FsdGVkX1+J6IKgOD4E/Ni/VqnNf/FwZwaHotk4Gfc=", "email": "U2FsdGVkX19xzInZdszNewMDlKOVZzDraUkhT2VCjtIfqgaZNYhzkKWUciUn0lCc", "message": "U2FsdGVkX1+s0SczDn9TOP9FSpBvJCqVpbL9wyniQcs=" } } ``` Jason Gerfen - Licensed under the GNU Public License or GPL
  Files folder image Files  
File Role Description
Accessible without login Plain text file example.html Example Auxiliary data
Accessible without login Plain text file jquery.handleStorage.js Class Class source
Accessible without login Plain text file jquery.handleStorage.min.js Class Class source
Accessible without login Plain text file README.md Doc. Documentation
Accessible without login Plain text file style.css Data Auxiliary data

 Version Control Unique User Downloads Download Rankings  
 100%
Total:459
This week:0
All time:71
This week:4Up