LocalStorage - Form Fields - SISYPHUS PLUGIN
HTML
<script src="https://raw.github.com/mdp/gibberish-aes/master/src/gibberish-aes.min.js"></script>
<script src="https://raw.github.com/simsalabim/sisyphus/master/sisyphus.min.js"></script>
<div id="contact-form" class="clearfix">
<form class="bz-pc-x-insert" id="default" name="default" style="defalt" method="post" action="">
<fieldset>
<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" />
<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>
</fieldset>
</form>
</div>
<script>
/*
* jNotify jQuery Plug-in
*
* Copyright 2010 Giva, Inc. (http://www.givainc.com/labs/)
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* Date: 2010-09-30
* Rev: 1.1.00
*/
(function(B){B.jnotify=function(K,M,L){return new C(K,M,L)};B.jnotify.version="1.1.00";var...
CSS
.jnotify-container{position:fixed;top:0;left:0;width:100%;z-index:100000;}.jnotify-container .jnotify-notification{position:relative;}.jnotify-container .jnotify-notification .jnotify-background{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#e3f0db;filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90;z-index:1;}.jnotify-container .jnotify-notification a.jnotify-close,.jnotify-container .jnotify-notification a.jnotify-close:link,.jnotify-container .jnotify-notification a.jnotify-close:visited,.jnotify-container .jnotify-notification a.jnotify-close:focus,.jnotify-container .jnotify-notification a.jnotify-close:hover{position:absolute;top:2px;right:5px;padding:0 5px;font:bold 1.4em Arial,Helvetica,sans-serif;line-height:1em;color:#567b1b;text-decoration:none;z-index:3;cursor:pointer;}.jnotify-container .jnotify-notification .jnotify-message{position:relative;z-index:2;padding:20px;text-align:center;color:#567b1b;font:bold 1.4em Arial,Helvetica,sans-serif;line-height:1.2em;}.jnotify-container .jnotify-notification .jnotify-message *{font-size:1em !important;}.jnotify-container .jnotify-notification-error .jnotify-background{background-color:#d79eac;}.jnotify-container .jnotify-notification-error .jnotify-close,.jnotify-container .jnotify-notification-error .jnotify-message{color:#a72947!important;}.jnotify-container .jnotify-notification-warning .jnotify-background{background-color:#fff7d1;}.jnotify-container .jnotify-notification-warning .jnotify-close,.jnotify-container .jnotify-notification-warning .jnotify-message{color:#c2a928!important;}
JavaScript
/*
$('#message').blur(saveSettings);
loadSettings();
function loadSettings() {
$('#name').val(localStorage.name);
$('#message').val(localStorage.message);
}
function saveSettings() {
localStorage.name = $('#name').val();
localStorage.message = $('#message').val();
}
*/
// $('#default').handleStorage({storage:'sessionStorage',aes:true});
if (false) $('#default').sisyphus({
//$('#form1').sisyphus({
timeout: 15,
onSave: function() {
$.jnotify('Data are saved to Local Storage', 500);
// kludge on Uniform.js bug
setTimeout(function(){
// $.uniform.update('input, select');
}, 200);
},
onRestore: function() {
$.jnotify('Data are restored from Local Storage', 500);
// kludge on Uniform.js bug
setTimeout(function(){
// $.uniform.update('input, select');
}, 200);
},
onRelease: function() {
$.jnotify('Data are removed from Local Storage', 'warning', 500);
// kludge on Uniform.js bug
setTimeout(function(){
// $.uniform.update('input, select');
}, 500);
}
});
//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": "[email protected]",
"message": "Test #1"
},
"default-aes": {
"uuid": "cb76ax8d-6539-4151-a70d-ed0628c083d5",
"name": "U2FsdGVkX1+J6IKgOD4E/Ni/VqnNf/FwZwaHotk4Gfc=",
"email": "U2FsdGVkX19xzInZdszNewMDlKOVZzDraUkhT2VCjtIfqgaZNYhzkKWUciUn0lCc",
"message":...