刷新后如何保存我的按钮状态？答案

【问题标题】：How can i save state my button after refresh?刷新后如何保存我的按钮状态？
【发布时间】：2015-10-02 17:14:42
【问题描述】：

我有这个样本：

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

我想做的只是相信... 我想在刷新页面按钮后保存状态

例如...如果按钮是绿色的并且是...然后在刷新后保持绿色刷新如果按钮为红色，刷新后仍为红色。

你怎么能做到这一点？谁能给我一个简单的例子？

提前致谢！

【问题讨论】：

您需要将按钮的最后一个已知状态传递给服务器端，否则按钮状态将在页面刷新时丢失。
好的，我该怎么做？:) 我需要一个简短的例子
试试cookie / localStorage。
或者尝试使用哈希/查询字符串。

标签： javascript jquery html css

【解决方案1】：

您可以设置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";
}
});

【讨论】：

【解决方案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');
    }



});

这一个利用本地存储来存储类的值，然后在onload时将存储的类提供给div

DEMO

【讨论】：

【解决方案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>

【讨论】：