フォーム入力を保存してJSONをクッキーに保存しますが、パスワードを除外します

Question

長い研究の後、私の最初の質問をStackoverflowに投稿します。

私はフォームを持っており、入力をクッキーの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 

EDIT：

これに加えて、私は1つが、むしろ、ユーザーの入力データを格納するために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}); 
};