jQuery fadeToggle cache / localStorage

Question

让我说我有一个立方体，我想用1个按钮隐藏/显示他。 如何缓存切换状态，以便在通过按钮隐藏多维数据集并刷新页面时，多维数据集仍然隐藏？ toggleClass分辨率也很有用。

<div id="cube" style="width:100px;height:100px;background:red;"></div>

<button id="trigger">trigger</button>

我的jQuery测试：

$('#trigger').click(function(){
  $('#cube').fadeToggle('fast');});

Answer 1

您只需在window对象

上设置全局属性即可

window[attrName] = value;

见以下：

$('#trigger').click(function(){
  fadeToogle();
});

function fadeToogle(){
  if(window["myState"] && window["myState"]=="on"){
      $('#cube').fadeIn('fast');
      window["myState"] = "off";
  } else {
    $('#cube').fadeOut('fast');
    window["myState"] = "on";
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cube" style="width:100px;height:100px;background:red;"></div>

<button id="trigger">trigger</button>

您也可以使用localStorage，但您可能会收到有关CROSS来源或浏览器兼容性的错误。