Question

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

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

}});

实例是here。

Answer 1

您需要在代码中添加set并从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 MDN Local Storage

的更多信息

将DIV元素的状态保存到LocalStorage

1 个答案: