Storing HTML Form data locally

<script type=”text/javascript”>

$(document).ready(function() {

var formElements = {};
var current_siteurl = window.location.href;
//console.log( ‘current_siteurl: ‘+ current_siteurl);

//WRITE
$(“form :input”).each(function(){
var input = $(this);
// console.log( input.attr(‘name’));

$(“textarea[name='”+input.attr(‘name’)+”‘]”).keyup(function() {

// console.log(‘click:’+ $(“textarea[name='”+input.attr(‘name’)+”‘]”).val());
formElements[input.attr(‘name’)]  = $(“textarea[name='”+input.attr(‘name’)+”‘]”).val();
formElements_str = JSON.stringify(formElements);
// A süti neve az aktuális oldal neve, egyedi azonosító
Cookies.set(current_siteurl, formElements_str , { expires: 3 });

});
});

//READ
$(“#show_saved_btn”).click(function() {

formPack_str = Cookies.get(current_siteurl);
//console.log( ‘suti: ‘+ formPack_str);
if(formPack_str){
formPack = JSON.parse(formPack_str);
for (var k in formPack ){
if (formPack.hasOwnProperty(k)) {
$(“textarea[name='”+k+”‘]”).val(formPack[k]);
}
}
}

});
});

</script>

 

 

Autosave form content to Local Storage, a cookie if LS is not available, as changes are made realtime in forms

https://github.com/BenGriffiths/jquery-save-as-you-type

The jQuery.autosave plugin automatically and unobtrusively saves form data based on a set of critera. : https://github.com/nervetattoo/jquery-autosave

Guide to have Persistent Form data using jQuery: http://time2hack.com/2013/09/guide-to-have-persistent-form-data-using-jquery.html

The idea is to store the form data in the cookies and refill tht data if the form is called once again. And if the for submission goes successful; we will just clear the cookies.

JQuery Cookie Lib: https://github.com/js-cookie/js-cookie

Blogbook : PHP | Javascript | Laravel | Corcel | CodeIgniter | VueJs | ReactJs | WordPress