javascript - 如何在 jquery 中使用 localStorage？

Question

我尝试制作一个脚本，以便它看到我选择了哪个下拉选项，但现在我想向它添加 localStorage 以便它在我离开页面时记住它

我现在编写了这段代码，但它似乎无法正常工作，有人可以帮助我吗？

localStorage.setItem($("#drop"));
var selec = localStorage.getItem($("#drop"));
if (selec == null) {
    console.log($("#drop"))
    $("#hide" + $("#drop")[0].value).show();
    $("#drop").change(function() {
        var end = this.value;
        $('.hide').hide();
        $("#hide" + end).show();
    });
} else {
    $("#hide" + selec.value).show();
}

我的原始代码(没有localstorage)

console.log($("#drop"))
$("#hide" + $("#drop")[0].value).show();
$("#drop").change(function() {
    var end = this.value;
    $('.hide').hide();
    $("#hide" + end).show();
});

html 下拉菜单

<select id='drop' class='keuze' style="float:right;">
    <option class='keuze' value='table1' selected>Computer</option>
    <option class='keuze' value='table2'>Monitor</option>
    <option class='keuze' value='table3'>Software</option>
    <option class='keuze' value='table4'>Gebruiker</option>
    <option class='keuze' value='table5'>Randapparatuur</option>
    <option class='keuze' value='table6'>Telefoon</option>
    <option class='keuze' value='table7'>Tablet</option>
    <option class='keuze' value='table8'>Laptop</option>
</select>

编辑:我的 js 文件

$(function() {
    $('#table1').wrap('<div id="hidetable1"  class="hide" style="display:none"/>');
    $('#table2').wrap('<div id="hidetable2"  class="hide" style="display:none"/>');
    $('#table3').wrap('<div id="hidetable3"  class="hide" style="display:none"/>');
    $('#table4').wrap('<div id="hidetable4"  class="hide" style="display:none"/>');
    $('#table5').wrap('<div id="hidetable5"  class="hide" style="display:none"/>');
    $('#table6').wrap('<div id="hidetable6"  class="hide" style="display:none"/>');
    $('#table7').wrap('<div id="hidetable7"  class="hide" style="display:none"/>');
    $('#table8').wrap('<div id="hidetable8"  class="hide" style="display:none"/>');

    $('#table1').DataTable({
        "searching": true,
        "lengthMenu": [
            [12, -1],
            [12, "All"]
        ],
        "columnDefs": [{
            "bSortable": false,
            "aTargets": [-1]
        }, {
            "bSearchable": false,
            "aTargets": [-1]
        }],
        "font-family": 'Arial',
        "stateSave": true
    });
    $('#table2').DataTable({
        "searching": true,
        "lengthMenu": [
            [12, -1],
            [12, "All"]
        ],
        "columnDefs": [{
            "bSortable": false,
            "aTargets": [-1]
        }, {
            "bSearchable": false,
            "aTargets": [-1]
        }],
        "stateSave": true
    });
    $('#table3').DataTable({
        "searching": true,
        "lengthMenu": [
            [12, -1],
            [12, "All"]
        ],
        "columnDefs": [{
            "bSortable": false,
            "aTargets": [-1]
        }, {
            "bSearchable": false,
            "aTargets": [-1]
        }],
        "stateSave": true
    });
    $('#table4').DataTable({
        "searching": true,
        "lengthMenu": [
            [12, -1],
            [12, "All"]
        ],
        "columnDefs": [{
            "bSortable": false,
            "aTargets": [-1]
        }, {
            "bSearchable": false,
            "aTargets": [-1]
        }],
        "stateSave": true
    });
    $('#table5').DataTable({
        "searching": true,
        "lengthMenu": [
            [12, -1],
            [12, "All"]
        ],
        "columnDefs": [{
            "bSortable": false,
            "aTargets": [-1]
        }, {
            "bSearchable": false,
            "aTargets": [-1]
        }],
        "stateSave": true
    });
    $('#table6').DataTable({
        "searching": true,
        "lengthMenu": [
            [12, -1],
            [12, "All"]
        ],
        "columnDefs": [{
            "bSortable": false,
            "aTargets": [-1]
        }, {
            "bSearchable": false,
            "aTargets": [-1]
        }],
        "stateSave": true
    });
    $('#table7').DataTable({
        "searching": true,
        "lengthMenu": [
            [12, -1],
            [12, "All"]
        ],
        "columnDefs": [{
            "bSortable": false,
            "aTargets": [-1]
        }, {
            "bSearchable": false,
            "aTargets": [-1]
        }],
        "stateSave": true
    });
    $('#table8').DataTable({
        "searching": true,
        "lengthMenu": [
            [12, -1],
            [12, "All"]
        ],
        "columnDefs": [{
            "bSortable": false,
            "aTargets": [-1]
        }, {
            "bSearchable": false,
            "aTargets": [-1]
        }],
        "stateSave": true
    });
    var selec = localStorage.getItem('drop') || $("#drop").val();
    $("#hide" + selec).show();

    $("#drop").change(function() {
        var val = $(this).val();
        $('.hide').hide();
        $("#hide" + val).show();
        localStorage.setItem('drop', val);
    });
});

Answer 1

localStorage 只能包含字符串值，因此您尝试存储整个 jQuery 对象将不会起作用。您还需要在做出选择后更新 localStorage。试试这个:

var selec = localStorage.getItem('drop') || $("#drop").val();
$("#hide" + selec).show();
$('#drop').val(selec).change(function() {
  var val = $(this).val();
  $('.hide').hide();
  $("#hide" + val).show();
  localStorage.setItem('drop', val);
});

Working example

请注意，示例必须在 fiddle 中，因为 SO 片段限制对 localStorage 的访问。