记住从自动处理的JS数组中选择（通过Cookie）选项（取决于用户的选择）

Question

如何通过Cookie保存用户在城市选择（city_id）中的选择？ 更新页面后，城市会自动处理。 HTML

 <select name="country_id" id="country_id" class="select_class">
    <option value="USA">USA</option>
    <option value="Russia">Russia</option>
 </select>
 <select name="city_id" id="city_id">

JS

 var countries = {
    USA: ['NewYork', 'Chicago', 'Las Vegas'],
    Russia: ['Moscow','Saint-Petersburg','Vladivostok']
};

var city_update = function() {
    var country_id = $('#country_id option:selected').val();
    var emptycity = $('#city_id').empty();
    for (i in countries[country_id]) {
        var country_name = countries[country_id][i];
        emptycity.append($('<option>').val(country_name).text(country_name));
    }
};
$('#country_id').change(city_update);
city_update();

Answer 1

您可以将其存储为cookie或使用localStorage，具体取决于您支持的浏览器。 根据代码的外观，您只是将国家/地区添加为city_id字段的选项？

localStorage更简单（并非所有浏览器都支持它），您只需将事件绑定到city_id更改：

$('#city_id').change(function() {

localStorage.setItem('selected-city',$(this).val());

});

此外，你最好做for(var i = 0;i < countries[country_id].length;i++) {...而不是for in性能方面的原因，因为你通过数组循环，而不是一个对象（对象需要for in循环）。

或者，您可以使用以下函数使用Cookie设置它，例如：

var cookie = new Cookie();
    $('#city_id').change(function() {

    cookie.set('selected-city',$(this).val(), 86400);
    // access with cookie.get('selected-city');
    });

function Cookie() {
    this.get = function(name) {
        var cookies = document.cookie.split(";");
        for(var i = 0; i < cookies.length; i++) {
                var a = cookies[i].split("=");
                if(a.length == 2) {
                    a[0] = a[0].replace(/^\s+|\s+$/g, '');
                    a[1] = a[1].replace(/^\s+|\s+$/g, '');
                    if(a[0] == name) {
                        return unescape(a[1]);
                    }
                }
        }
        return "";
    };
    this.set = function(name, value, seconds, path, domain, secure) {
        var cookie = (name + "=" + escape(value));
        if(seconds) {
            var date = new Date(new Date().getTime() + (seconds * 1000));
            cookie += ("; expires=" + date.toGMTString());
        }
        cookie += (path ? "; path=" + path : "");
        cookie += (domain ? "; domain=" + domain : "");
        cookie += (secure ? "; secure" : "");
        document.cookie = cookie;
    };
    this.del = function(name, path, domain, secure) {
        var cookie;
        switch(typeof name) {
            case 'object':
                for(var i = 0; i < name.length; i++) {
                    cookie = name[i] + "=; expires=Thu, 01-Jan-70 00:00:01 GMT";
                    cookie += (path ? "; path=" + path : "");
                    cookie += (domain ? "; domain=" + domain : "");
                    cookie += (secure ? "; secure" : "");
                    document.cookie = cookie;
                }

                break;
            default:
                cookie = name + "=; expires=Thu, 01-Jan-70 00:00:01 GMT";
                cookie += (path ? "; path=" + path : "");
                cookie += (domain ? "; domain=" + domain : "");
                cookie += (secure ? "; secure" : "");
                document.cookie = cookie;
                break;

        }


    };
}

最后，更新这个：

var city_update = function() {
    var country_id = $('#country_id option:selected').val();
    var emptycity = $('#city_id').empty();
    for (i in countries[country_id]) {
        var country_name = countries[country_id][i];
        var selected = country_name == cookie.get('selected-city') ? true : false;
        emptycity.append($('<option>').attr('selected',selected).val(country_name).text(country_name);
    }
};