jQuery fadeToggle 缓存/localStorage

Question

假设我有一个立方体，我想用 1 个按钮 hide/show 他。如何缓存切换状态，以便当我通过按钮隐藏多维数据集并刷新页面时多维数据集仍然隐藏？ 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 来源或浏览器兼容性的错误。

jQuery fadeToggle 缓存/localStorage

jQuery fadeToggle cache / localStorage

javascript

jquery

caching

toggle

local-storage