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

Parsing Multi-Variable Cookies into Web Form Values

本文关键字：Web 表单 变量 Cookie      更新时间：2023-09-26

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

它看起来像这样（在每个饼干内容中）...

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

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

然后，在需要时，一个函数将 cookie 加载到 JavaScript 字符串变量中，从 ';&&;' 之间解析字符串中的实际变量，并通过相应的名称将它们加载到真正的 JavaScript 变量中，然后当用户返回到表单时，JavaScript 使用这些值填充相应（同名）表单元素的值， 自然而然。

任何帮助将不胜感激。

提前感谢！！

- 詹姆斯·

完整的

解决方案如下： 这是完整的"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的情况下完成......嗯。。。

相关文章：