以下の完全なソリューション:これが完全な'save_form.js'コードです!
//<!-- Prerequisites: jquery.min.js -->
//<!-- A script to set a cookie [Argument(s) accepted: Cookie Name, Cookie Value, etc.] [BEGIN] -->
function set_cookie ( name, value, path, domain, secure )
{
var cookie_string = name + "=" + escape ( value );
var cookie_date = new Date(); // current date & time ;
var cookie_date_num = cookie_date.getTime(); // convert cookie_date to milliseconds ;
cookie_date_num += 35 * 60 * 1000; // add 35 minutes in milliseconds ;
cookie_date.setTime(cookie_date_num); // set my_date Date object 35 minutes forward ;
cookie_string += "; expires=" + cookie_date.toGMTString();
if ( path )
cookie_string += "; path=" + escape ( path );
if ( domain )
cookie_string += "; domain=" + escape ( domain );
if ( secure )
cookie_string += "; secure";
document.cookie = cookie_string;
};
//<!-- A script to set a cookie [Argument(s) accepted: Cookie Name, Cookie Value, etc.] [END] -->
//<!-- A script to grab a cookies value by name [Argument(s) accepted: Cookies Name] [BEGIN] -->
function get_cookie ( cookie_name )
{
var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
if ( results )
{
return ( unescape ( results[2] ) );
}
else
{
return null;
};
};
//<!-- A script to grab a cookies value by name [Argument(s) accepted: Cookies Name] [END] -->
function populateCookieFromForm ( cookieName ) {
var encodedCookie;
var preCookieObj = '{';
var allMainElements = $('form').find('input[type=text], select');
for (var i=0; i < allMainElements.length; i++)
{
preCookieObj = preCookieObj + '"' + allMainElements[i].name +'":"'+ allMainElements[i].value +'",';
};
preCookieObj = preCookieObj.substring(0, preCookieObj.length - 1);
preCookieObj = preCookieObj + '}';
//<!-- btoa() encodes 'string' argument into Base64 encoding -->
encodedCookie = btoa( preCookieObj );
set_cookie(cookieName, encodedCookie);
};
function populateFormFromCookie (cookieName) {
if ( ! get_cookie ( cookieName ) )
{
//<!-- Do Nothing - No Cookie For this form set. -->
}
else
{
//<!-- atob() decodes 'string' argument from Base64 encoding -->
jSONCookieObj = atob( get_cookie ( cookieName ) ) ;
jSONObj = JSON.parse( jSONCookieObj );
var allMainElements = $('form').find('input[type=text], select');
for (var i=0; i < allMainElements.length; i++)
{
var elementName = allMainElements[i].name;
var elementValue = jSONObj[elementName];
allMainElements[i].value = elementValue;
};
};
};
function populateCookieFromRadios (cookieName) {
var radioState={};
$(':radio').each(function(){
if(!radioState[this.name]){
radioState[this.name]={};
}
radioState[this.name][this.value]=this.checked;
});
/* stringify to JSON and convert to Base64 */
var storeString= btoa(JSON.stringify(radioState));
/* store in cookie*/
set_cookie(cookieName, storeString);
};
function populateRadiosFromCookie (cookieName) {
if ( ! get_cookie ( cookieName ) )
{
//<!-- Do Nothing - No Cookie For this form set. -->
}
else
{
var cookieString = get_cookie ( cookieName );
var newPageState= JSON.parse(atob(cookieString));
/* loop through radios setting state */
$(':radio').prop('checked',function(){
return newPageState[this.name][this.value];
});
};
};
これは、これらの関数を適切に呼び出す方法です。フォームを含む HTML/PHP ページの下部近くに、次の JavaScript をそれぞれ配置します。
<script type="text/javascript">
//<!-- If returning user detected, populate form with cookie values [BEGIN] -->
populateFormFromCookie('thisForm');
populateRadiosFromCookie('thisFormRadios');
//<!-- If returning user detected, populate form with 'section' cookie values [END] -->
//<!-- On change of ALL form elements re-save form cookie(s) [BEGIN] -->
$('input[type=radio]', $('form')).on('change',function(e){
populateCookieFromRadios('thisFormRadios');
});
$('input[type=text], select, textarea', $('form')).on('change',function(e){
populateCookieFromForm('thisForm');
});
$('input[type=text]', $('form')).on('input',function(e){
populateCookieFromForm('thisForm');
});
//<!-- On change of ALL form elements re-save form cookie(s) [END] -->
</script>
次のタスクは、これらすべてが jQuery なしで実行できるかどうかを確認することです...うーん...