刷新后如何保存按鈕的狀態？

Question

我有這個樣本：

鏈接

代碼HTML：

<div class="square">
</div>

代碼CSS：

.square{
    width:20px;
    height:20px;
    background:green;
}

.fa-square{
    background:red;
     width:20px;
    height:20px;
}

代碼JS：

$("div").click(function(){

                      if ( $( this ).hasClass( "fa-square" ) ) {
                           $( this ).removeClass('fa-square').addClass('square');
                      }else{
                             $('.square').removeClass('square').addClass('fa-square');
                      }
            });

我想做的就是相信...我想在刷新頁面按鈕后保存狀態

例如，...如果按鈕為綠色而為...，則刷新后保持綠色刷新。如果按鈕為紅色，則刷新后保持紅色。

你該怎么做？ 有人可以給我看一個簡單的例子嗎？

提前致謝！

Answer 1

您可以設置cookie並在內容的開頭讀取它們，以檢查是否設置了像這樣的小提琴狀態

function readCookie(name) {
return (name = new RegExp('(?:^|;\\s*)' + ('' + name).replace(/[-[\]{} ()*+?.,\\^$|#\s]/g, '\\$&') + '=([^;]*)').exec(document.cookie)) && name[1];
}
if(readCookie('state') == "fa-square"){
$('div').addClass('fa-square');
}else if(readCookie('state') == "square"){
$('div').addClass('square');
}
$("div").click(function () {
if ($(this).hasClass("fa-square")) {
    $(this).removeClass('fa-square').addClass('square');
    document.cookie= "state=square";
} else {
    $('.square').removeClass('square').addClass('fa-square');
    document.cookie= "state=fa-square";
}
});

Answer 2

var retrievedObject = localStorage.getItem('class');
if(retrievedObject){
    $('div').addClass(retrievedObject)
}

console.log('class ', (retrievedObject));
$("div").click(function () {

    if ($(this).hasClass("fa-square")) {
        $(this).removeClass('fa-square').addClass('square');
        localStorage.setItem('class', 'square');
    } else {
        $('.square').removeClass('square').addClass('fa-square');
        localStorage.setItem('class', 'fa-square');
    }



});

這個利用本地存儲來存儲class的值，然后在onload時將存儲的class給div

演示

Answer 3

使用localStorage嘗試此示例

 $(function() { var cls = 'state'; //key name for local storage var sqr = $('.square'); sqr.addClass(localStorage.getItem(cls)); //restore state on page load sqr.on('click', function() { sqr.toggleClass('fa-square'); //shorthand for add/remove class localStorage.setItem(cls, this.className); //preserve current state on every click }); }); 

 .square { width: 20px; height: 20px; background: green; } .fa-square { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="square"></div>