Как использовать localStorage в jquery?

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

Попробуйте:

1. Чтобы установить

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

2. Чтобы получить

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

3. Удалить

   localStorage.removeItem('data');

Answer 2

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);
});

Рабочий пример

Обратите внимание, что пример должен быть в скрипке, так как фрагменты SO ограничивают доступ к localStorage.