Javascript 将DIV元素的状态保存到LocalStorage

我想隐藏/显示一些div的元素，具体取决于复选框。 我有复选框，状态已保存到localStorage，但刷新后的DIV元素未保存（使用默认状态加载）。jQuery（-mobile）。 非常感谢你的帮助

<fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
    <legend>Some text.</legend>
    <div id="checkbox1">
        <label>
            <input type="checkbox" data-theme="a" name="ligne1" data-iconpos="right" checked="checked" />Ligne 1</label>
    </div>
    <div id="checkbox2">
        <label>
            <input type="checkbox" data-theme="a" name="ligne2" data-iconpos="right" checked="checked" />Ligne 2</label>
    </div>
    <div id="checkbox3">
        <label>
            <input type="checkbox" data-theme="a" name="ligne3" data-iconpos="right" checked="checked" />Ligne 3</label>
    </div>
    <fieldset>

$(document).ready(function () {
function getCurrentValue(checkMe) {
    return checkMe.is(':checkbox') ? checkMe.prop('checked') : checkMe.val();
}

function checkvalues() {
    var original = true;
    $(':input').each(function () {
        if (getCurrentValue($(this)) !== $(this).data('originalvalue')) {
            original = false;
        }
    });

    return original;
}

if (localStorage) {

    $(':input').each(function () {

        $(this).data('originalvalue', getCurrentValue($(this)));
    });

    $('#checkbox1').on('change', ':input', function () {
        if (checkvalues()) {
            $('#ligne1').show();
        } else {
            $('#ligne1').hide();
        }
    });

    $('#checkbox2').on('change', ':input', function () {
        if (checkvalues()) {
            $('#ligne2').show();
        } else {
            $('#ligne2').hide();
        }
    });

    $('#checkbox3').on('change', ':input', function () {
        if (checkvalues()) {
            $('#ligne3').show();
        } else {
            $('#ligne3').hide();
        }
    });

}});

一些文本。
木质素1
木质素2
木质素3
$（文档）.ready（函数（）{
函数getCurrentValue（checkMe）{
返回checkMe.is（':checkbox'）？checkMe.prop（'checked'）：checkMe.val（）；
}
函数checkvalues（）{
var原始=真；
$（':input'）。每个（函数（）{
if（getCurrentValue（$（this））！==$（this.data（'originalvalue'））{
原件=假；
}
});
归还原件；
}
if（本地存储）{
$（':input'）。每个（函数（）{
$（this）.data（'originalvalue'，getCurrentValue（$（this））；
});
$（'#checkbox1'）。on（'change'，'：input'，function（）{
if（checkvalues（））{
$（'#ligne1'）.show（）；
}否则{
$（'#ligne1'）.hide（）；
}
});
$（'#checkbox2'）。on（'change'，'：input'，function（）{
if（checkvalues（））{
$（'#ligne2'）.show（）；
}否则{
$（'#ligne2'）.hide（）；
}
});
$（'#checkbox3'）。在（'change'，'：input'，函数（）{
if（checkvalues（））{
$（'#ligne3'）.show（）；
}否则{
$（'#ligne3'）.hide（）；
}
});
}});

---

实例是。

您需要在代码中添加集合并从localStorage获取

要设置数据，您需要以下内容：

// First we setup the data in key/value pairs
var dataContainer = { 'check1':'checked', 'check2':'notchecked'}
// Then save it to localStorage
localStorage.setItem('storedData', JSON.stringify(dataContainer));

要从localStorage获取数据，请执行以下操作：

var dataRetrieved = localStorage.getItem('storedData');
console.log('Local Storage data:', JSON.parse(dataRetrieved))

---

有关localStorage的更多信息

查看您的代码，我看不到状态保存到localStorage或从中检索到的任何地方。现在我添加了JavaScript；-）但这是在示例中。不要这样做：

if（localStorage）.

，因为如果它不存在，您将得到一个错误。相反，请执行以下操作：

if（typeof localStorage！=“undefined”）

..或：

if（window.localStorage）.

在您的代码中仍然没有对

localStorage

的读/写操作。。。