如何在刷新後保存狀態按鈕？

代碼HTML：

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

CODE CSS：

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

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

CODE JS：

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

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

我想保存狀態刷新頁面按鈕

例如後......如果按鈕是綠色的，是我想要做的就是簡單地認爲... ... 然後刷新後保持綠色刷新如果按鈕爲紅色，刷新後仍保持紅色。

你怎麼能這樣做？任何人都可以給我看一個簡單的例子嗎？

在此先感謝！

來源

2015-10-02 Marius

您需要在按鈕的最後已知狀態傳遞給服務器端的其他按鍵的狀態將丟失的頁面刷新。 – NightsWatch

好的，我該怎麼做？:)我需要一個簡短的例子 – Marius

試試'cookie' /'localStorage'。 – Arvind

，您可以設置Cookie，並在內容的開頭讀他們來檢查，如果狀態設置這樣fiddle

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

來源

2015-10-02 08:59:59 Akshay

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



});

這一個利用localStorage的存儲然後在類的價值onload事件給存儲類到div

DEMO

來源

2015-10-02 09:08:36 guradio

使用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>

來源

2015-10-02 09:08:47 Arvind

如何在刷新後保存狀態按鈕？

回答

相關問題