使用 cookie 和尽可能少的 jQuery 捕获和调用单选按钮组的状态

Question

就在一天前，我发布了this question 并找到/构建了我自己的解决方案，因为缺乏足够的答案。现在，我需要帮助再次完成类似的过程。但是，这一次，我需要捕获（保存到 cookie 作为“Base64”数据）并调用（在用户返回时重新检查）所有单选按钮组的状态（出于显而易见的原因，通过“名称”而不是“ID”），页面加载后，如果需要触发所有相应的 onchange 事件。例如，如果单选按钮组标签有以下问题：“您在此地址居住超过 3 年吗？”一个单选按钮标签显示“是”，另一个显示“否”。如果用户选择“否”，表格中会显示一个额外的“地址”表格行。表格的所有机制都显示在“否”上检查'已经完成。我正在寻找一种简单的方法：

A:) 在表单上任何单选按钮的“onchange”事件中记录所有单选按钮组的状态（即选中哪一个）。

B:) 将该信息转换为 JSON 或其他一些保存记录

C:) 步骤 [B:] 中的 Base64 编码数据

D:) 保存到 cookie

页面重新加载时（用户返回页面）...

E:) 从 cookie 中获取数据

F:) 解码 Base64 并赋值给变量

G:) 从数据遍历所有表单单选按钮，重新检查最初检查的内容。

听起来容易吗？试一试！我做到了....现在还在。

Answer 1

这里是没有 cookie 保存的 jQuery 基础知识，留给你

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*/

/* on page load pull data from cookie (if exists) - add a cookie validation test*/
var cookieString=storeString;// just using this for demo


var newPageState= JSON.parse(atob(cookieString));
/* loop through radios setting state */
$(':radio').prop('checked',function(){
    return newPageState[this.name][this.value];    
});

DEMO

atob() and btoa() docs

编辑：如果浏览器支持，则使用 localStorage，并带有 cookie 回退。将对站点的每个 http 请求发送到服务器的 cookie 大小最小化

Answer 2

谢谢@Charlietfl。 +1！这是完整的'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 的情况下完成……嗯……