jQueryで複数の値を持つクッキーを作成する方法

Question

複数の値を持つクッキーを作成して取得する際に問題が発生しています。 さて、私がしたいのは、送信ボタンをクリックしたときにフォーム入力値を持つクッキーを作成することです。同じユーザーがサイトを再訪すると、フォームは前回入力したもので自動入力されます。

私のhtml：

<form id="formen"> 
<fieldset> 
    <legend>Login</legend> 
    <label for="firstname" class="label">Firstname</label> 
    <input type="text" name="firstname" id="firstname" class="text" maxlength="30" /> 
    </br></br> 
    <label for="lastname" class="label">Lastname</label> 
    <input type="text" name="lastname" id="lastname" class="text" maxlength="30" /> 
    </br></br> 
    <label for="lastname" class="label">Address</label> 
    <input type="text" name="third" id="address" class="text" maxlength="30" /> 
    </br></br> 
    <label for="lastname" class="label">City</label> 
    <input type="text" name="city" id="city" class="text" maxlength="30" data-sayt-exclude/> 
    </br></br> 
    <label for="lastname" class="label">Zipcode</label> 
    <input type="number" name="zipcode" id="zipcode" class="text" maxlength="30" /> 
    </br></br> 
    <label for="lastname" class="label">E-mail</label> 
    <input type="email" name="email" id="email" class="text" maxlength="30" /> 
    </br></br> 
    <label for="lastname" class="label">Phone</label> 
    <input type="number" name="phone" id="phone" class="text" maxlength="30" /> 
    </br></br> 
    <input type="submit" name="submit" value="Remember Me" id="remember"/> 
</fieldset> 
</form> 

マイジャバスクリプト/ jQueryの：

$(document).ready(function() { 
var date = new Date(); 
date.setTime(date.getTime() + (60 * 1000)); 

if ($("#remember").click(function() { 
    $.cookie('firstnameCookie', $firstnameVariable.val(), { expires: date }); 
    $.cookie('lastnameCookie', $lastnameVariable.val(), { expires: date }); 
    $.cookie('addressCookie', $addressVariable.val(), { expires: date }); 
    $.cookie('cityCookie', $cityVariable.val(), { expires: date }); 
    $.cookie('zipcodeCookie', $zipcodeVariable.val(), { expires: date }); 
    $.cookie('emailCookie', $emailVariable.val(), { expires: date }); 
    $.cookie('phoneCookie', $phoneVariable.val(), { expires: date }); 
})); 

//set the value of the cookie to the element 
var $firstnameVariable = $("#firstname").val($.cookie("firstnameCookie")); 
var $lastnameVariable = $("#lastname").val($.cookie("lastnameCookie")); 
var $addressVariable = $("#address").val($.cookie("addressCookie")); 
var $cityVariable = $("#city").val($.cookie("cityCookie")); 
var $zipcodeVariable = $("#zipcode").val($.cookie("zipcodeCookie")); 
var $emailVariable = $("#email").val($.cookie("emailCookie")); 
var $phoneVariable = $("#phone").val($.cookie("phoneCookie")); 
}); 

このコードは実際にトリックを行います。さまざまな入力値を保存し、ユーザーがサイトを再訪したときに自動入力します。

唯一の問題は、入力値ごとに新しいCookieを作成したくないということです。 それぞれの入力値を持つクッキーを1つだけ作成し、異なる入力フィールドを自動入力できるようにすることはできますか？

誰かが私を助けることを願っています！それを理解できません。 Thx

Answer 1

クッキーを保存する前に、フォームの値を文字列に連結し、割り当てが必要なときに分割します。 は、これらの私が連結するために使用する機能と分割されている：

var splitQueryString = function (q) { 
     var pars = q.split("&"); 
     var qq = {}; 
     var i = 0; 
     for (i = 0; i < pars.length; i++) { 
      var ret = pars[i].toString().split("="); 
      qq[ret[0]] = decodeURIComponent(ret[1]); 
     } 
     return qq; 
    }; 

    var getQueryString = function (pars) { 
     var q = ''; 
     var value; 
     var key; 
     for (key in pars) { 
      if (pars.hasOwnProperty(key)) { 
       value = pars[key]; 
       if (!(value === null)) { 
        q += "&" + key + "=" + encodeURIComponent(value); 
       } 
      } 
     } 

     if (q.length > 0) { 
      //remove first 
      q = q.substr(1); 
     } 

     return q; 
    }; 

のようなものになる可能性があなたのコード：オブジェクトを文字列に変換することによって

if ($("#remember").click(function() { 
     var pars = {}; 
     pars.firstnameVariable = $firstnameVariable.val(); 
     pars.lastnameVariable = $lastnameVariable.val(); 

     var cookie = getQueryString(pars); 
     $.cookie('formCookie', cookie, { expires: date }); 
     })); 

    //set the value of the cookie to the element 
    var pars = splitQueryString($.cookie("formCookie")); 
    var $firstnameVariable = $("#firstname").val(pars.firstnameVariable); 
    var $lastnameVariable = $("#lastname").val(pars.lastnameVariable); 

Answer 2

ストアデータを

var obj = { 
    "firstname" : $("#firstname").val(), 
    "lastname" : $("#firstname").val() 
}; 
$.cookie('data', JSON.stringify(obj), { expires: date }); 

そして、あなたがそれを読んだとき：

var data = $.cookie("data"), 
    obj = data ? JSON.parse(data) : ""; 
Object.keys(obj).forEach(function(key){ 
    $("#" + key).val(obj[key]); 
}); 

個人的に私はcookieではなくlocalstorageを使用します。