Question

我想在页面刷新后保留背景颜色值。我认为有可能使用html5 localstorage或jquery ajax.can，请你帮我解决这个问题。

以下是我迄今为止尝试过的代码：

HTML

<ul class="chngeme">
    <li class="red"></li>
    <li class="blue"></li>
    <li class="green"></li>
</ul>

JS

$('ul.chngeme li').click(function() {
    var getcolor = $(this).css('background-color');

    $('body').css('background', getcolor);

    if (typeof(Storage) !== 'undefined') {
        // Store
        localStorage.setItem('colorvalue', getcolor);

        // Retrieve
        document.getElementById('body').style.setProperty = localStorage.getItem('colorvalue');
    }else {
        document.getElementById('result').style.setProperty = 'Sorry, your browser does not support Web Storage...!';
    }
});

提前致谢！

Answer 1

当用户点击li时，您必须存储该值。但是，您必须在页面/文档加载时检索该值。

使用以下代码段：

HTML

<ul class="chngeme">
    <li class="red"></li>
    <li class="blue"></li>
    <li class="green"></li>
</ul>

CSS

.red {
    background-color: #f00;
}

.blue {
    background-color: #00f;
}

.green {
    background-color: #0f0;
}

JS

$('ul.chngeme li').click(function() {
    var color = $(this).css('background-color');

    $('body').css('background-color', color);

    if (typeof(Storage) !== 'undefined') {
        // Store
        localStorage.setItem('colorvalue', color);
    }else {
        $('#result').html('Sorry, your browser does not support Web Storage...!');
    }
});

$(document).ready(function() {
    if (typeof(Storage) !== 'undefined') {
        // Retrieve
        var color = localStorage.getItem('colorvalue');

        $('body').css('background-color', color);
    }else {
        $('#result').html('Sorry, your browser does not support Web Storage...!');
    }
});

这是小提琴：http://jsfiddle.net/k7moorthi/bqwhwrv6/

html5 - 即使在使用本地存储的页面刷新后保持页面背景颜色

1 个答案: