javascript - 将多变量 Cookie 解析为 Web 表单值

Question

我意识到 FireFox、Chrome、Safari 和 Opera 可以限制域/网站可以设置的 Cookie 数量。因此，我想到了一种不同的方法来存储我的 Web 表单中的许多文本、单选按钮和选择框值 - 为 Web 表单的每个主要部分设置一个多变量 Cookie，而不是为每个变量设置单独的 Cookie。

它看起来像这样(在每个 cookie 内容中)...

firstName=John;&&;lastName=Andrews;&&;streetAddress=1234 Memory Ln.

我正在寻找的是一个 JavaScript 函数，它将正确创建/更新这种类型的 cookie(使用元素名称而不是 ID 来最大程度地兼容单选按钮)，并在每个表单元素“onchange”上触发' 事件。

然后，在需要时，将 cookie 加载到 JavaScript 字符串变量中的函数，从 ';&&;' 之间解析字符串以获取实际变量并按相应的名称将它们加载到真正的 JavaScript 变量中，然后当用户返回表单时，JavaScript 会自动使用这些值填充相应(按相同名称)表单元素的值。

任何帮助将不胜感激。

提前致谢!!

-詹姆斯 A.

Answer 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 的情况下完成...嗯...