Javascript 如何在jquery中使用localStorage？

我尝试创建一个脚本，以便它看到我选择的下拉选项，但现在我想将

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

）

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>

电脑类
班长
软件
格布鲁伊克
兰德尔公寓酒店
Telefoon
药片
笔记本电脑

编辑：我的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);
    });
});

$（函数（）{
$（#表1'）。包装（“”）；
$（#表2'）。包装（“”）；
$（'表3'）。包装（''）；
$（#表4'）。包装（“”）；
$（#表5'）。包装（“”）；
$（#表6'）。包装（“”）；
$（'表7'）。包装（''）；
$（'表8'）。包装（''）；
$（'#表1'）。数据表({
“搜索”：没错，
“长度菜单”：[
[12, -1],
[12，“全部”]
],
“columnDefs”：[{
“可移植”：错误，
“目标”：[-1]
}, {
“可搜索”：错误，
“目标”：[-1]
}],
“字体系列”：“Arial”，
“stateSave”：正确
});
$（'#表2'）。数据表({
“搜索”：没错，
“长度菜单”：[
[12, -1],
[12，“全部”]
],
“columnDefs”：[{
“可移植”：错误，
“目标”：[-1]
}, {
“可搜索”：错误，
“目标”：[-1]
}],
“stateSave”：正确
});
$（'#表3'）。数据表({
“搜索”：没错，
“长度菜单”：[
[12, -1],
[12，“全部”]
],
“columnDefs”：[{
“可移植”：错误，
“目标”：[-1]
}, {
“可搜索”：错误，
“目标”：[-1]
}],
“stateSave”：正确
});
$（'#表4'）。数据表({
“搜索”：没错，
“长度菜单”：[
[12, -1],
[12，“全部”]
],
“columnDefs”：[{
“可移植”：错误，
“目标”：[-1]
}, {
“可搜索”：错误，
“目标”：[-1]
}],
“stateSave”：正确
});
$（'#表5'）。数据表({
“搜索”：没错，
“长度菜单”：[
[12, -1],
[12，“全部”]
],
“columnDefs”：[{
“可移植”：错误，
“目标”：[-1]
}, {
“可搜索”：错误，
“目标”：[-1]
}],
“stateSave”：正确
});
$（'#表6'）。数据表({
“搜索”：没错，
“长度菜单”：[
[12, -1],
[12，“全部”]
],
“columnDefs”：[{
“可移植”：错误，
“目标”：[-1]
}, {
“可搜索”：错误，
“目标”：[-1]
}],
“stateSave”：正确
});
$（'#表7'）。数据表({
“搜索”：没错，
“长度菜单”：[
[12, -1],
[12，“全部”]
],
“columnDefs”：[{
“可移植”：错误，
“目标”：[-1]
}, {
“可搜索”：错误，
“目标”：[-1]
}],
“stateSave”：正确
});
$（'#表8'）。数据表({
“搜索”：没错，
“长度菜单”：[
[12, -1],
[12，“全部”]
],
“columnDefs”：[{
“可移植”：错误，
“目标”：[-1]
}, {
“可搜索”：错误，
“目标”：[-1]
}],
“stateSave”：正确
});
var selec=localStorage.getItem（'drop'）||$（“#drop”）.val（）；
$（“#隐藏”+selec）.show（）；
$（“#drop”）.change（函数（）{
var val=$（this.val（）；
$（'.hide'）.hide（）；
$（“#隐藏”+val）.show（）；
setItem（'drop'，val）；
});
});

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

var selec=localStorage.getItem（'drop'）||$（“#drop”）.val（）；
$（“#隐藏”+selec）.show（）；
$（'#drop'）.val（selec）.change（function（）{
var val=$（this.val（）；
$（'.hide'）.hide（）；
$（“#隐藏”+val）.show（）；
setItem（'drop'，val）；
});

请注意，由于代码段限制了对本地存储的访问，因此该示例必须处于混乱状态。

请尝试以下操作：

设置

localStorage.setItem（'data'，JSON.stringify（data））

得到

var data=JSON.parse（localStorage.getItem（'data'）

删除

localStorage.removietem（'data'）

---

可能重复的解释我为什么它在我的代码中不起作用@dachw为什么你不保存值而不是整个目标？你可以在字符串化后将对象存储到localStorage，因为localStorage只能有字符串值。在«C»中代表完成。现在它一直隐藏。在这种情况下，请编辑你的问题以包括相关的HTML。已将它们添加到问题中。谢谢。我为您添加了一个工作示例。还要注意的是，我已经把小提琴中的

wrap（）

逻辑弄干了，现在可以了，谢谢你！唯一有点奇怪的是，当我第一次进入页面时，没有选择的选项，但我仍然在html的第一个选项中使用了

selected

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