Question

我做了一个简单的功能，如果您按下特定的按钮，该功能会显示一些内容。我的问题是，即使您重新加载页面，我也不知道如何保存该动作。

这是我的HTML：

<div class="content1" style="display: none;">
  <p style="color: green;">Some content from content1</p>
</div>

<div class="content2" style="display: none;">
  <p style="color: red;">Some content from content2</p>
</div>


<button class="content1-btn">Button 1</button>

<button class="content2-btn">Button 2</button>

这是我的jQuery：

$(document).ready(function(){
  $(".content1-btn").click(function(){
    $(".content1").show();
  });
  $(".content2-btn").click(function(){
    $(".content2").show();
  });
});

上面的代码可以正常工作。问题是我想让Cookie记住您单击的女巫按钮。例如，如果单击按钮1，则即使重新加载页面，.content1仍应显示。我希望这是有道理的。

Answer 1

尝试使用localstorage，它将起作用或尝试使用此方法，

  $(".content1-btn").click(function(){
    $(".content2").hide();
    $(".content1").show();
    localStorage.setItem('buttonClicked', '.content1');
  });
  $(".content2-btn").click(function(){
  $(".content1").hide();
    $(".content2").show();
    localStorage.setItem('buttonClicked', '.content2');
  });
  
  $(document).ready(function(){
  $(".content2, .content1").hide();
  	var val = localStorage.getItem('buttonClicked');
    $(val).show();
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content1" style="display: none;">
  <p style="color: green;">Some content from content1</p>
</div>

<div class="content2" style="display: none;">
  <p style="color: red;">Some content from content2</p>
</div>


<button class="content1-btn">Button 1</button>

<button class="content2-btn">Button 2</button>

Check this fiddle

如何在Cookie中保存动作？

1 个答案: