如何在jQuery中制作具有多个值的cookie答案

【问题标题】：How to make cookie with multiple values in jQuery如何在jQuery中制作具有多个值的cookie
【发布时间】：2016-09-20 23:01:30
【问题描述】：

我在创建和获取包含多个值的 cookie 时遇到了一些麻烦。好的，我想做的是在单击提交按钮时创建一个带有表单输入值的 cookie。然后当同一用户再次访问该网站时，表单将自动填充用户上次输入的内容。

我的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>

我的 javascript/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。是否可以只创建一个包含每个输入值的 cookie，并让它自动填充不同的输入字段？

希望有人可以帮助我！想不通。。谢谢

【问题讨论】：

localstorage 可能是比 cookie 更好的解决方案。基本上你想对一个对象进行字符串化。

标签： javascript jquery html cookies

【解决方案1】：

在保存 cookie 之前将表单值连接成一个字符串，并在您必须分配它时拆分。这些是我用来连接和拆分的函数：

    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);

【讨论】：

我正在尝试使用您的代码设置 cookie。我在控制台中不断收到“Uncaught TypeError: Cannot read property 'split' of undefined”错误。任何想法为什么它不起作用？
@Colin 您是否在您的项目中安装了“cookie”jquery 插件？ stackoverflow.com/questions/1458724/…github.com/carhartl/jquery-cookie
是的，已安装 cookie 插件的 1.4.1 版本。会不会是别的？
原因是 cookie 必须已经设置。我的代码是基于问题代码的示例。这是一个工作示例jsfiddle.net/9r0zct8f/1 如果它现在可以工作，请投票给我的答案
当我使用小提琴时，我在控制台中收到这些错误： Uncaught ReferenceError: $firstnameVariable is not defined and Uncaught TypeError: Cannot read property 'split' of undefined – 这发生在我清除所有来自 Chrome 的 jsfiddle.net cookie。

【解决方案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]);
});

我个人会使用 localstorage 而不是 cookie。

【讨论】：