如何在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

请注意，由于SO Snippets限制对localStorage的访问，因此该示例必须处于小提示中。

Answer 2

试试这个：

1. 设置

   localStorage.setItem('data', JSON.stringify(data));

2. 获取

   var data = JSON.parse(localStorage.getItem('data'));

3. 删除

   localStorage.removeItem('data');