How to use localStorage in jquery?

Question

I try to make a script so it sees which dropdown option I selected but now I want to add localStorage to it so it remembers when I leave the page

I made now this code but it doesn't seem to work properly, could someone please help me ?

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

My original code (without localstorage)

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

html dropdown menu

<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>

EDIT: my js file

$(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 can only contain string values, therefore your attempt to store an entire jQuery object will not work. You also need to update localStorage after a choice is made. Try this:

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

Note that the example has to be in a fiddle as SO Snippets restrict access to localStorage.

Answer 2

Try this :

1. To set

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

2. To get

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

3. To delete

   localStorage.removeItem('data');