Javascript 刷新后如何保存状态按钮？

我有这个样本：

代码HTML:

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

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

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

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

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

代码JS:

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

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

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

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

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

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

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

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

---

提前谢谢

您可以设置cookies并在内容开头读取它们，以检查是否设置了这样的状态

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

---

使用

localStorage

$（函数（）{
var cls='state'；//本地存储的键名
var sqr=$（'.square'）；
sqr.addClass（localStorage.getItem（cls））；//页面加载时还原状态
sqr.on（'单击'，函数（）{
sqr.toggleClass（'fa-square'）；//添加/删除类的缩写
localStorage.setItem（cls，this.className）；//在每次单击时保留当前状态
});
});
.square{
宽度：20px；
高度：20px；
背景：绿色；
}
富华广场{
背景：红色；
}

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