jQuery Cookie插件保存选择值

jQuery Cookie plugin to save select value?

本文关键字：选择 保存 插件 Cookie jQuery      更新时间：2023-09-26

我有一系列使用ajax的两个链式选择，效果很好。 我需要能够在 cookie 中存储/保存第一个选择以供将来访问，但无法完全弄清楚在现有代码中如何/做什么？

$(function(){
    var questions = $('#questions');
    function refreshSelects(){
        var selects = questions.find('select');
        //  Lets not do chosen on the first select
        selects.not(":first").chosen({ disable_search_threshold: true });
        // Listen for changes
        selects.unbind('change').bind('change',function(){
            // The selected option
            var selected = $(this).find('option').eq(this.selectedIndex);
            // Look up the data-connection attribute
            var connection = selected.data('connection');

            // Removing the li containers that follow (if any)
            selected.closest('#questions li').nextAll().remove();
            if(connection){
                fetchSelect(connection);
            }
        });
    }
    var working = false;
    function fetchSelect(val){
        if(working){
            return false;
        }
        working = true;
        $.getJSON('citibank.php',{key:val},function(r){
            var connection, options = '';
            switch (r.type) {
                case 'select':
                    $.each(r.items,function(k,v){
                        connection = '';
                        if(v){
                            connection = 'data-connection="'+v+'"';
                        }
                        options+= '<option value="'+k+'" '+connection+'>'+k+'</option>';
                    });
                    if(r.defaultText){
                        // The chose plugin requires that we add an empty option
                        // element if we want to display a "Please choose" text
                        options = '<option></option>'+options;
                    }
                    // Building the markup for the select section
                    $('<li>'
                        <p>'+r.title+'</p>'
                        <select data-placeholder="'+r.defaultText+'">'
                            '+ options +''
                        </select>'
                        <span class="divider"></span>'
                    </li>').appendTo(questions);
                    refreshSelects();
                    break;
                case 'html':
                    $(r.html).appendTo(questions);
                    break;
            }
            working = false;
        });
    }
    $('#preloader').ajaxStart(function(){
        $(this).show();
    }).ajaxStop(function(){
        $(this).hide();
    });
    // Initially load the product select
    fetchSelect('callTypeSelect');
});

这是一篇关于使用 jCookies 的好文章。

http://tympanus.net/codrops/2011/09/04/j-is-for-jcookies-http-cookie-handling-for-jquery/

设置它的代码是这样的：

$.jCookies({
    name : 'Person',
    value : { first: 'John', last: 'Smith', Age: 25 }
});

获取饼干是这样的

var person = $.jCookies({ get : 'Person' });

服务器上是否需要该值？如果你不这样做，我会重新评论jStorage插件。它使用本地存储和用户数据来保存信息。这样做的好处是，这些值不会像 cookie 那样在每次请求时发送到您的服务器。用法非常简单：

$.jStorage.set("something", {data: [1,2,3], other: "a string"});

和

$.jStorage.get("something"); // returns {data: [1,2,3], other: "a string"}

在您的代码中，它将类似于：

$(function() {
  var questions = $('#questions');
  var lastSelection = $.jStorage.get("lastSelection");
  if(lastSelection) {
     questions.find("select:first").val(lastSelection);
  }
  // more code....
  selects.unbind('change').bind('change',function(){
    var selected = $(this).find('option').eq(this.selectedIndex);
    if(questions.find("select:first")[0] === this) { // Only save if it's the first combo (you could change this to a better way to identify the first select)
      $.jStorage.set("lastSelection", selected);
    }
    // more code....
});
相关文章：