多个下拉菜单记住它们的最后状态——jquery、cookies或localStorage

Question

我试图使用下拉菜单的一些网站导航，并希望他们记住他们最后选择的状态与jQuery cookie或localStorage。然而，有些下拉菜单有第二个下拉菜单，显示更多的选项。

基本设置是:

form
    fieldset
        select.select_class#select-writing
            option(value='') Select
            option(value='books') Books
            option(value='articles') Articles
            option(value='quotes') Quotes
            option(value='suggested-readings') Suggested Readings
    fieldset.hide#select-writing-books
        select.select_class
            option(value='') Choose a book...
            option(value='thoughts') Thoughts on Design
            option(value='trademark') Trademark Design
            option(value='iKnow') I Know a Lot of Things
            option(value='sparkle') Sparkle and Spin
            option(value='trademarkSelection') The Trademarks of Paul Rand — A Selection
            option(value='little1') Little 1
            option(value='listen') Listen! Listen!
            button.hide#select-writing-books-button(href="#") Go

我的JS是:

$('#select-writing').change(function() {
    if ($(this).val() == "books") {
        $("#select-writing-books").show();
    } else {
        $("#select-writing-books").hide();
    }
    if ($(this).val() == "articles") {
        $("#select-writing-articles").show();
    } else {
        $("#select-writing-articles").hide();
    }
    if ($(this).val() == "quotes") {
        $("#select-writing-quotes").show();
    } else {
        $("#select-writing-quotes").hide();
    }
    if ($(this).val() == "suggested-readings") {
        $("#select-writing-suggested-readings").show();
    } else {
        $("#select-writing-suggested-readings").hide();
    }
});

如果有人选择了一个有第二个下拉菜单，他们仍然会显示刷新/重新访问等

我已经尝试使用jquery-cookie插件与此代码，但第二个下拉框不出现:

if($.cookie('remember_select') != null) {
    // set the option to selected that corresponds to what the cookie is set to
    $('.select_class option[value="' + $.cookie('remember_select') + '"]').attr('selected', 'selected');
}
// when a new option is selected this is triggered
$('.select_class').change(function() {
    // new cookie is set when the option is changed
    $.cookie('remember_select', $('.select_class option:selected').val());
});

代码工作，但是否有一个更干净，更简洁的方式来编写其他几个下拉实例?

可以在这里看到一个工作演示:http://paulrand.design/_r@nd20i5/_template-article.html

我也想使用插件SelectOrDie样式下拉本身，但似乎有一些冲突(http://vst.mn/selectordie/)。这里有一个工作的例子:http://paulrand.design/_r@nd20i5/_template-list-with-thumbnail.html

Answer 1

如果你想在不同的访问/重载中存储，你需要一个不在客户端的存储系统，因为当你重新加载页面时，javascript基本上会从头开始。

cookie似乎是显而易见的选择，尽管本地存储也可以工作。基本上，你的方向是对的。Javascript中没有什么奇特的函数会在页面重新加载之间记住变量的值。你必须把它存储在页面外的某个地方。

此外，如果您的站点有登录，并且您希望使其与客户端无关，则可以使用AJAX将值存储在数据库中，每次select触发onChange时写入它们。

无论哪种方式，当用户进行更改时，您都必须将它们写在其他地方，然后在需要它们或页面加载时将它们全部读回来。