javascript - 将更改的文本保存到 localStorage Javascript 中切换元素的按钮

Question

我正在尝试在我的 Web 应用程序中构建一个按钮来切换元素，但我希望按钮中的文本也能根据应该完成的操作进行更改!

代码如下:

$(".hideLink").on("click", function(){
    if($(this).text()=="Hide Products - ")
    {
        $(this).text("Show Products - ");
    } else {
        $(this).text("Hide Products - ");
    }
    $(".ISProductBody").toggle(); 
        
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ISBody">
     <h5>Header</h5>
     <div class="ISTopLink"><a href="#ISTop">Return to Top</div>
     <div class="ISHide"><a href="#" class="hideLink">Hide Products - </a></div>
     <hr>
     <div id="pos" style="display: block;">
      <div class="ISProductBody">
       <div class="ISSubHead"><A HREF="#">Prodcut Name</A></div>
      <div class="ISList">
       <ul>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
      </ul>
      </div>
    </div>
    </div>

我想在页面刷新时也保留更改，这样它就不会回到以前的状态。所以就像它保存了元素是隐藏还是显示，以及点击按钮时要完成的操作!

我非常感谢每一个提示或解决方案!干杯!

Answer 1

我认为也许您不需要保存文本，只需保存状态(如果正在显示或正在隐藏)就足够了。因为当您从 localStorage 检索状态时，您可以检查它然后定义要显示的文本。

如果您真的想保存文本，请继续按照下面代码段中用于保存状态的相同逻辑，并使用它来保存文本。

OBS:在 S.O 中，我的代码无法正常工作，它不允许使用代码段中的 localStorage，请从此处尝试，然后告诉我它是否适合您。

编辑
当页面加载时，它会尝试查找 locaStorage，如果找到，它将根据您的需要进行更改。工作 fiddle :http://jsfiddle.net/mk96wrvq/

$(document).ready(function(){
  var actualState = localStorage.getItem('state');
  var btnJQ = $('.hideLink');  
  if (actualState != null){
    var myText = "";
    if (actualState == 'showing'){
      myText = "Hide Products";
    }else{
      myText = "Show Products";
      $(".ISProductBody").toggle(); 
    }       
    btnJQ.text(myText);
  }
  
  $(".hideLink").on("click", function(){
  var _thisJQ = $(this);
  if(_thisJQ.text() == "Show Products"){
      localStorage.setItem('state', 'showing');  
      _thisJQ.text("Hide Products"); 
      
  } else if (_thisJQ.text() == "Hide Products") {
    localStorage.setItem('state', 'hidden');  			            
    _thisJQ.text("Show Products");  
  }
  
  $(".ISProductBody").toggle(); 
});
  
});

    <div class="ISBody">
     <h5>Header</h5>
     <div class="ISTopLink"><a href="#ISTop">Return to Top</a></div>
     <div class="ISHide"><a href="#" class="hideLink">Hide Products - </a></div>
     <hr>
     <div id="pos" style="display: block;">
      <div class="ISProductBody">
       <div class="ISSubHead"><A HREF="#">Prodcut Name</A></div>
      <div class="ISList">
       <ul>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
      </ul>
      </div>
    </div>
    </div>