Question

经过长时间的研究，发表了关于Stackoverflow的第一个问题。

我有一个表单，并希望将输入存储在cookie JSON字符串中。到目前为止，它与以下脚本一样好用。但由于安全原因，我想排除密码。

这里有谁知道如何实现这一目标？

<script src="js.cookie.js"></script> //source: https://github.com/js-cookie/js-cookie

<script>
(function ($) {
    $.fn.serializeJSON = function () {
        var json = {};
        jQuery.map($(this).serializeArray(), function (n, _) {
            json[n['name']] = n['value'];
        });
        return json;
    };
})(jQuery);

ensureNumber = function (n) {
    n = parseInt(n, 10);
    if (isNaN(n) || n <= 0) {
        n = 0;
    }
    return n;
};


saveFormToCookie = function (form) {
    var name = $(form).attr('id');
    var data = $(form).serializeJSON();
    Cookies.set(name, data, {expires: 1});

};

loadFormFromCookie = function (form) {
    var name = $(form).attr('id');
    var data = Cookies.get(name);

    if (typeof data === 'undefined') {
        return;
    }

    JSON.parse(data, function (key, value) {
        if (typeof (value) !== 'object') {
            var el = $(form).find('*[name="' + key + '"]');

            if (el.is('input')) {
                if (false) {
                    // code formatting stub
                } else if (el.attr('type') === 'number') {
                    el.val(ensureNumber(value));
                } else if (el.attr('type') === 'checkbox') {
                    if (el.val() === value) $(el).prop('checked', true);
                } else if (el.attr('type') === 'radio') {
                    $.each(el, function (_, elc) {
                        if (elc.value === value) $(elc).prop('checked', true);
                    });
                } else {
                    el.val(value);
                }
            } else if (el.is('select')) {
                el.val(value);
            } else if (el.is('textarea')) {
                el.val(value);
            }
        }
    });
};
</script> //source: https://gist.github.com/themactep/2714798

编辑：

除此之外，我还要感谢解释为什么应该使用PHP会话来存储用户输入数据。

Answer 1

最简单的方法是缓存密码值，清除密码字段，saveFormToCookie，然后在需要时重新填充密码。

Javascript （jsFiddler）

(function ($) {
    $.fn.serializeJSON = function () {
        var json = {};
        jQuery.map($(this).serializeArray(), function (n, _) {
            json[n['name']] = n['value'];
        });
        return json;
    };
})(jQuery);

$(document).ready(function(){
     $("#btnSubmit").click(function(event){
          // Prevents the button from submitting the form
          event.preventDefault();

          var txtPassword = $("#txtPassword");
          var frmLogin = $("#frmLogin");

          //cache Password
          var cachedPassword = txtPassword.val();

          //Clear Password
          txtPassword.val("");

          // Save to cookie
          saveFormToCookie(frmLogin);

          // repopulate
          txtPassword.val(cachedPassword);    

          // To submit form as normal
          // use frmLogin.sumbit(); 
          // instead of $("#btnClear").click(); 
          $("#btnClear").click(); 
      });

      $("#btnClear").click(function(event){
            event.preventDefault();

          $(this).closest('form').find("input[type=text], input[type=password]").val("");
      });

      $("#btnLoad").click(function(event){
           event.preventDefault();

           loadFormFromCookie($("#frmLogin"));
      });
});

ensureNumber = function (n) {
    n = parseInt(n, 10);
    if (isNaN(n) || n <= 0) {
        n = 0;
    }
    return n;
};


saveFormToCookie = function (form) {
    var name = $(form).attr('id');
    var data = $(form).serializeJSON();
    Cookies.set(name, data, {expires: 1});
};

loadFormFromCookie = function (form) {
    var name = $(form).attr('id');
    var data = Cookies.get(name);

    if (typeof data === 'undefined') {
        return;
    }

    JSON.parse(data, function (key, value) {
        if (typeof (value) !== 'object') {
            var el = $(form).find('*[name="' + key + '"]');

            if (el.is('input')) {
                if (false) {
                // code formatting stub
                } else if (el.attr('type') === 'number') {
                    el.val(ensureNumber(value));
                } else if (el.attr('type') === 'checkbox') {
                    if (el.val() === value) $(el).prop('checked', true);
                } else if (el.attr('type') === 'radio') {
                    $.each(el, function (_, elc) {
                        if (elc.value === value) $(elc).prop('checked', true);
                    });
                } else {
                    el.val(value);
                }
            } else if (el.is('select')) {
                el.val(value);
            } else if (el.is('textarea')) {
                el.val(value);
            }
        }
    });
};

<强> HTML

<form id="frmLogin" action="">
  <label for="txtUser">Username: </label><input id="txtUser" type="text" name="user"><br>
  <label for="txtPassword">Password: </label><input id="txtPassword" type="password" name="password"><br>
<br>
  <input id="btnSubmit" type="submit" value="Submit">
  <input id="btnClear" type="button" value="Clear">
  <input id="btnLoad" type="button" value="Load from cookie">
</form>

<强> CSS

label {
  display: block;
}

更新（jsFiddler）

如果您只是希望它在后台发生，只需替换您使用的saveFormToCookie函数：

saveFormToCookie = function (form) {
    var name = $(form).attr('id');
    var formCopy = $(form).clone();

    // remove password fields from copy
    formCopy.children("input[type='password']").remove();

    // serialize copy
    var data = formCopy.serializeJSON();
    Cookies.set(name, data, {expires: 1});
};

将表单输入保存到cookie JSON但不包括密码

1 个答案: